imitation
RadioGroup
A labelled set of radios.
PlanGroup with legend and cards
Plan
£0
£12
£48
Colour
Choose a colour.
In context
Export dialogOne choice, then one action
Export rota
FormatNative appearance
NativeRadioGroup appearance="native": each Radio is the browser radio, grouped by name.
RadioGroup props
| Prop | Type | Required | Default |
|---|---|---|---|
asChild | boolean | undefined | No | — |
appearance | "custom" | "native" | undefined | No | custom |
Radio props
| Prop | Type | Required | Default |
|---|---|---|---|
invalid | boolean | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
A real Radix role="radiogroup": arrow keys move between options, Space selects, each Radio is a real <label>. Give the group an aria-label or aria-labelledby pointing at its legend.
data-rebar-* attributes
data-rebar-component="radio-group" on the group, "radio" on each item; data-rebar-part="indicator", "label"; Radix sets data-state.
Migrating to Ant Design
AntD's Radio.Group/Radio take the same value/onChange (event-based) shape: a close, low-risk rename.