Default
Variants
Default
Outline
Solid
Sizes
Small
Medium
Large
Form Example
Disabled
Props
RadioGroup
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | Initially selected value |
| value | string | Controlled selected value |
| onValueChange | (value: string) => void | Change handler |
| disabled | boolean | Disable all items |
| className | string | Additional classes on root |
RadioGroup.Item
| Prop | Type | Description |
|---|---|---|
| value | string | Value for this item (required) |
| variant | "default" | "outline" | "solid" | Visual style |
| size | "sm" | "md" | "lg" | Radio size |
| disabled | boolean | Disable this item |
Usage
<RadioGroup defaultValue="option-1">
<div className="flex items-center gap-2">
<RadioGroup.Item value="option-1" id="r1" />
<Label htmlFor="r1">Option One</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroup.Item value="option-2" id="r2" />
<Label htmlFor="r2">Option Two</Label>
</div>
</RadioGroup>