Radio Group
Mutually exclusive selection from a set of options. Only one radio button can be selected at a time with full keyboard navigation and RTL support.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
Vertical Layout (Default)
tsx
Horizontal Layout
tsx
With Description Text
Perfect for individuals. $9/month.
For small teams. $29/month.
Custom solutions. Contact sales.
tsx
Disabled Options
tsx
Controlled Component
Selected: option1
tsx
In Forms
tsx
Props
RadioGroup
| Name | Type | Default | Description |
|---|---|---|---|
value | string | undefined | The controlled value of the selected radio item |
defaultValue | string | undefined | The default selected value (uncontrolled) |
onValueChange | (value: string) => void | undefined | Event handler called when the value changes |
disabled | boolean | false | Disables all radio items in the group |
name | string | undefined | The name for form submission |
required | boolean | false | Marks the radio group as required |
RadioGroupItem
| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | undefined | The value of the radio item |
disabled | boolean | false | Disables this specific radio item |
Accessibility
Keyboard Navigation
- Tab: Move focus to/from radio group
- Arrow Keys: Navigate between radio options
- Space: Select focused radio option
Always Use Labels
Always pair radio items with labels. Clicking the label selects the radio button, improving usability.
Group Labeling
Use a heading or label to describe what the radio group is for. This helps screen reader users understand the context.
Screen Readers
Screen readers announce the radio role, the label, whether it's selected, and the group position (e.g., "2 of 3").
RTL Considerations
Radio groups automatically support RTL layout. Radio buttons and labels maintain proper spacing and alignment in both directions.