zhongwei/gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
docs/components/radio-group.md Normal file
View File

@@ -0,0 +1,61 @@
- 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>
```