Radio Group
Accessible radio button group for mutually exclusive choices — vertical or horizontal layout, arrow key navigation.
API
All inputs and configuration options for zyra-radio-group.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction of the radio options |
disabled | boolean | false | Disables the entire group |
label | string | '' | aria-label for the radiogroup role |
value (on radio) | string | number | - | Value emitted when this radio is selected |
disabled (on radio) | boolean | false | Disables a single radio option |
Tokens
CSS custom properties zyra-radio-group reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-radio-bg | var(--zyra-color-input-bg) | Fill color of each radio circle when unselected. |
Border--zyra-color-radio-border | var(--zyra-color-input-border) | Border color of each radio circle when unselected. |
Focus shadow--zyra-radio-focus-shadow | var(--zyra-input-shadow-focus) | Ring shadow shown on keyboard focus. |
Checked border--zyra-color-radio-checked-border | var(--zyra-color-primary) | Border color when selected, or hovered while unselected. |
Checked background--zyra-color-radio-checked-bg | var(--zyra-color-primary-subtle) | Fill color of the circle when selected. |
Dot--zyra-color-radio-dot | var(--zyra-color-primary) | Color of the inner dot shown when selected. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Group uses role="radiogroup"; each option uses role="radio" with aria-checked
- Arrow keys navigate between options within the group
- Tab moves focus to the selected radio (or first if none selected)