Radio Group

Control to group radio components for single selection

Module

import '@capitec/omni-components/radio';

content_copy

import { OmniRadioGroup } from "@capitec/omni-components-react/radio";

content_copy

Source

Packages

Examples

Docs

Styles

Interactive

Label

Horizontal

Allow Deselect

Native Radio Input

Properties

Name	Attribute	Type	Description
label	label	`string \| undefined`	Text label.
allowDeselect	allow-deselect	`boolean \| undefined`	Allow deselection of radio elements.
horizontal	horizontal	`boolean \| undefined`	Arrange radio elements horizontally.
data	data	`object \| undefined`	Data associated with the component.
dir	dir	`string`	Used to set the base direction of text for display
lang	lang	`string`	Used to identify the language of text content on the web

Events

Name	Type	Description
radio-change	`CustomEvent<RadioChangeEventDetail>`	Dispatched when a radio selection is changed.

Name	Type
CheckableElement	`HTMLElement & { checked: boolean \| undefined }`
RadioChangeEventDetail	`{ current?: CheckableElement; previous?: CheckableElement }`

Name	Description
`loading_indicator`	Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called
`[Default Slot]`	Content to manage in the radio group, typically <input type="radio" /> and/or <omni-radio></omni-radio>.

Name	Description
`--omni-theme-primary-color`	Theme primary color.
`--omni-theme-primary-hover-color`	Theme primary hover color.
`--omni-theme-primary-active-color`	Theme primary active color.
`--omni-theme-accent-color`	Theme accent color.
`--omni-theme-accent-hover-color`	Theme accent hover color.
`--omni-theme-accent-active-color`	Theme accent active color.
`--omni-theme-background-color`	Theme background color.
`--omni-theme-background-hover-color`	Theme background hover color.
`--omni-theme-background-active-color`	Theme background active color.
`--omni-theme-font-color`	Theme font color.
`--omni-theme-disabled-border-color`	Theme disabled border color.
`--omni-theme-disabled-background-color`	Theme disabled background color.
`--omni-theme-error-font-color`	Theme disabled background color.
`--omni-theme-error-border-color`	Theme error border color.
`--omni-theme-hint-font-color`	Theme hint font color.
`--omni-theme-inactive-color`	Theme inactive color.
`--omni-theme-box-shadow-color`	Theme inactive color.
`--omni-theme-font-family`	Theme font family.
`--omni-theme-font-size`	Theme font size.
`--omni-theme-font-weight`	Theme font weight.
`--omni-theme-border-radius`	Theme border radius.
`--omni-theme-border-width`	Theme border width.
`--omni-theme-box-shadow`	Theme box shadow.

Name	Description
`--omni-radio-group-label-font-size`	Label font size.
`--omni-radio-group-label-font-weight`	Label font weight.
`--omni-radio-group-label-margin-bottom`	Label bottom margin.
`--omni-radio-group-vertical-margin`	Margin in between radio elements when arranged vertically.
`--omni-radio-group-horizontal-margin`	Margin in between radio elements when arranged horizontally.