62 lines
1.6 KiB
Markdown
62 lines
1.6 KiB
Markdown
- Home
|
|
- Components
|
|
- Radio Group
|
|
|
|
# RadioGroup
|
|
|
|
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
|
|
|
|
## Props
|
|
|
|
|
|
Component Notes
|
|
RadioGroup Pass-through wrapper over Radix RadioGroup.Root with layout classes
|
|
RadioGroupItem Pass-through wrapper over Radix RadioGroup.Item with styles
|
|
|
|
All Radix props are supported.
|
|
|
|
### Example
|
|
|
|
```
|
|
<RadioGroup defaultValue="a">
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="a" id="a" />
|
|
<label htmlFor="a">Option A</label>
|
|
</div>
|
|
</RadioGroup>
|
|
```
|
|
|
|
## Usage
|
|
|
|
```
|
|
<RadioGroup defaultValue="r2">
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r1" id="r1" />
|
|
<label htmlFor="r1">Radio 1</label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r2" id="r2" />
|
|
<label htmlFor="r2">Radio 2</label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r3" id="r3" disabled />
|
|
<label htmlFor="r3">Radio 3 disabled</label>
|
|
</div>
|
|
</RadioGroup>
|
|
<RadioGroup defaultValue="r3">
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r1" id="r1" />
|
|
<label htmlFor="r1">Radio 1</label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r2" id="r2" />
|
|
<label htmlFor="r2">Radio 2</label>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<RadioGroupItem value="r3" id="r3" disabled />
|
|
<label htmlFor="r3">Radio 3 disabled</label>
|
|
</div>
|
|
</RadioGroup>
|
|
```
|
|
|