Radio group
stable 1.9 kB<hk-radio-group>A radio set with roving tabindex: one tab stop for the group, arrows to move within it. That is the ARIA pattern, and it is what keyboard users expect.
#choice
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | unknown | null | Selected value. Two-way bindable. |
| options | HkRadioOption[] | [] | Choices. Each may carry a label and a hint line. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Layout direction; also picks which arrow keys move. |
| label | string | '' | Group label, exposed on the radiogroup. |
Outputs
valueChangeEventEmitter<unknown>Emits on selection.
Keyboard
- ↑ / ← Previous option, wrapping at the start
- ↓ / → Next option, wrapping at the end
- Tab Leaves the group — it is one stop, not one per radio
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-radio-dot | #dc2626 | Selected dot colour. |
| --hk-radio-border | #cbd5e1 | Ring colour when unselected. |
Accessibility
- Only the selected radio is tabbable; the rest are tabindex="-1" and reached with arrows.
- Selecting on arrow-move matches native radio behaviour, so nothing needs re-learning.