Forms
Radio group
Exactly one of a few options, all visible at once.
packages/design-system/components/ui/radio-group.tsx
Examples
Anatomy
- 01Group, a grid with gap-3
- 02Item, 16px circle
- 03Dot indicator when checked
- 04Label
Usage
import { RadioGroup, RadioGroupItem } from "@repo/design-system/components/ui/radio-group";
<RadioGroup value={plan} onValueChange={setPlan}>
<Field orientation="horizontal">
<RadioGroupItem id="sprint" value="sprint" />
<FieldLabel htmlFor="sprint">Sprint</FieldLabel>
</Field>
</RadioGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | none | The chosen item's value, on the group. |
| onValueChange | (value, details) => void | none | Called with the new value. |
| RadioGroupItem value* | string | none | What the group holds when this item is chosen. |
| disabled | boolean | false | On the group or a single item. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Use it for two to five options.
- Pick a sensible default.
Don't
- Use it for yes or no. A checkbox or toggle says it quicker.