Radio
Radio is a form control for selecting exactly one option from multiple choices. Group with RadioGroup to provide exclusive selection.
2
Weights
3
Sizes
Single
Selection
Radix
Base
Playground
Preview
Dvertical16px
Size
Color
Weight
Items
Direction
Options
<RadioGroup
defaultValue="option-1"
>
<RadioGroup.Item
value="option-1"
label="Option 1"
/>
<RadioGroup.Item
value="option-2"
label="Option 2"
/>
<RadioGroup.Item
value="option-3"
label="Option 3"
/>
</RadioGroup>Sizes
smCircle14px
Dot6px
Font12px
Gap6px
Click24px
defaultCircle16px
Dot8px
Font14px
Gap8px
Click32px
lgCircle20px
Dot10px
Font16px
Gap10px
Click36px
| Size | Circle | Dot | Font | Gap | Click Area | Preview |
|---|---|---|---|---|---|---|
sm | 14px | 6px | 12px | 6px | 24px | |
default | 16px | 8px | 14px | 8px | 32px | |
lg | 20px | 10px | 16px | 10px | 36px |
Features
With Field
Combine with the Field component to automatically inherit disabled state.
<Field>
<Field.Label>Notifications</Field.Label>
<RadioGroup defaultValue="email">
<RadioGroup.Item value="email" label="Email" />
<RadioGroup.Item value="push" label="Push" />
<RadioGroup.Item value="sms" label="SMS" />
</RadioGroup>
</Field><Field>
<Field.Label>Notifications</Field.Label>
<RadioGroup defaultValue="email" orientation="horizontal">
<RadioGroup.Item value="email" label="Email" />
<RadioGroup.Item value="push" label="Push" />
<RadioGroup.Item value="sms" label="SMS" />
</RadioGroup>
</Field>States
Default
Disabled
<RadioGroup> ... </RadioGroup>
<RadioGroup disabled> ... </RadioGroup>API
Component Structure
RadioGroup— Radix RadioGroup.ItemProps
.ItemPropsRadio item (label prop support)Props
RadioGroup
valueundefinedstringSelected value for controlled mode
defaultValueundefinedstringInitial value for uncontrolled mode
onValueChangeundefined(value: string) => voidCallback on selection change
size"default""sm" | "default" | "lg"Radio button size (14/16/20px)
color"default""default" | "primary"Border and dot color when checked
weight"bold""thin" | "bold"Border thickness (thin: 1px / bold: 2px)
orientation"vertical""vertical" | "horizontal"Item layout direction
disabledundefinedbooleanDisabled state
requiredundefinedbooleanRequired field
nameundefinedstringForm name attribute
looptruebooleanKeyboard navigation loop
| Name | Type | Default | Description |
|---|---|---|---|
value | string | undefined | Selected value for controlled mode |
defaultValue | string | undefined | Initial value for uncontrolled mode |
onValueChange | (value: string) => void | undefined | Callback on selection change |
size | "sm" | "default" | "lg" | "default" | Radio button size (14/16/20px) |
color | "default" | "primary" | "default" | Border and dot color when checked |
weight | "thin" | "bold" | "bold" | Border thickness (thin: 1px / bold: 2px) |
orientation | "vertical" | "horizontal" | "vertical" | Item layout direction |
disabled | boolean | undefined | Disabled state |
required | boolean | undefined | Required field |
name | string | undefined | Form name attribute |
loop | boolean | true | Keyboard navigation loop |
RadioGroup.Item
value*stringThis item's value (required)
labelundefinedstringRadio button label text
disabledundefinedbooleanIndividual disabled state
| Name | Type | Default | Description |
|---|---|---|---|
value* | string | - | This item's value (required) |
label | string | undefined | Radio button label text |
disabled | boolean | undefined | Individual disabled state |
Anatomy
1
2
3
4
Option AOption B
state
checked · unchecked1
Root
RadioGroup container
2
Circle
Outer ring
3
Inner Dot
Shown when selected
4
Label
Option text
Best Practices
✓
Recommended
- ✓Use for exclusive selection (pick one only)
- ✓Use for 2–5 options
- ✓Set a default value
- ✓Add clear labels to each item
✕
Avoid
- ✗Use Checkbox for multi-select
- ✗Consider Select for too many options
- ✗Use Segmented for tab-like switching
- ✗Don't use without labels
Accessibility
Keyboard
↑ ↓Move to previous/next item
← →Move to previous/next item
SpaceSelect
TabMove between groups
ARIA Attributes
role="radiogroup"Auto-appliedaria-checkedAuto-managed- Focus indicator
- Roving focus support