Radio Group
A set of mutually exclusive options where exactly one can be selected.Plans
Preview
Code
Up to 3 projects
Unlimited projects
Shared workspaces
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Field, RadioGroup } from '@advui/core'
<Field label="Plan">
<RadioGroup value={plan} onValueChange={setPlan}>
<RadioGroup.Item value="free" label="Free" description="Up to 3 projects" />
<RadioGroup.Item value="pro" label="Pro" />
</RadioGroup>
</Field>API reference
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected value, when you control it. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called when the selection changes. |
gap | SpaceTokens | '3' | Space between items. |
orientation | 'vertical' | 'horizontal' | 'vertical' | Arrow-key direction and layout. |
disabled | boolean | — | Disables all items. |
name | string | — | Field name when a native form is submitted.Web only. |
required | boolean | — | The native form will not submit until an option is picked.Web only. |
RadioGroup.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | The option value. |
label | ReactNode | — | Text beside the radio; pressing it selects the item. Without one, give the item an `aria-label`, or an `id` and your own `Label htmlFor`. |
description | ReactNode | — | Smaller text under the label, linked as the radio’s description. |
id | string | — | Link to a Label with the same `htmlFor`. |
size | 'sm' | 'md' | 'md' | 16 or 20px. |
disabled | boolean | — | Disables this item. |
Accessibility
- Implements the WAI-ARIA radio group:
role="radiogroup"withrole="radio"items andaria-checked. - Only the selected item is in the tab order; arrow keys move and select (roving focus).
- Name the group with
aria-labeloraria-labelledby; inside a Field, the field’s label names it. - An item’s
labelnames its radio and itsdescriptionis linked througharia-describedby.
| Key | Action |
|---|---|
| Tab | Moves focus into the group (to the selected item). |
| Arrow keys | Moves focus and selection between items. |
| Space | Selects the focused item. |
Platform notes
iOS
VoiceOver has no group names, so each item reads the group’s name and help text as its hint, after its own description. A labelled item’s visible label and description are hidden from VoiceOver, since the radio already reads them.
Android
TalkBack has no group names, so each item reads the group’s name and help text as its hint, after its own description. A labelled item’s visible label and description are hidden from TalkBack, since the radio already reads them.