Radio Group
One-of-many selection. Pair RadioGroup with RadioGroupItem entries; bind selected value with v-model.
Default
Three options arranged vertically.
Horizontal
Lay items horizontally with flex.
Disabled
Pass disabled on the group to disable every item.
API Reference
Props, events, and slots for each sub-component.
RadioGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | — | Selected value. Supports v-model. |
| defaultValue | string | — | Initial value when v-model is not used. |
| disabled | boolean | false | Disable the entire group. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the selected value changes. Enables v-model. |
RadioGroupItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique value tracked by the group. |
| id | string | — | Match with a Label for click targets. |
| disabled | boolean | false | Disable this item. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| ↑ | Moves selection to the previous item. |
| ↓ | Moves selection to the next item. |
| ← | Moves selection to the previous item. |
| → | Moves selection to the next item. |
| Space | Selects the focused item. |
| Tab | Moves focus into or out of the group. |
- Uses a roving tabindex; only the selected (or first) radio is tabbable.
- Applies radiogroup and radio roles with aria-checked on each item.