コンポーネント
Radio Group
一度に1つしか選択できない、ラジオボタンと呼ばれるチェック可能なボタンの集合です。
import { Label, RadioGroup, RadioGroupItem } from "@murasakijs/ui";export function RadioGroupDemo() {return ( <RadioGroup defaultValue="comfortable" className="gap-3"> <div className="flex items-center gap-2"> <RadioGroupItem value="default" id="r1" /> <Label htmlFor="r1">Default</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="comfortable" id="r2" /> <Label htmlFor="r2">Comfortable</Label> </div> <div className="flex items-center gap-2"> <RadioGroupItem value="compact" id="r3" /> <Label htmlFor="r3">Compact</Label> </div> </RadioGroup>);}使い方
import { Label, RadioGroup, RadioGroupItem } from "@murasakijs/ui";<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-2">
<RadioGroupItem value="comfortable" id="r1" />
<Label htmlFor="r1">Comfortable</Label>
</div>
</RadioGroup>API リファレンス
RadioGroup
| Prop | 型 | デフォルト |
|---|---|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
disabled | boolean | false |
name | string | — |
required | boolean | false |
RadioGroupItem
| Prop | 型 | デフォルト |
|---|---|---|
value | string | — (必須) |
disabled | boolean | false |
どちらも Radix UI の RadioGroup.Root
と RadioGroup.Item をレンダリングし、それ以外の props はすべてそのまま渡されます。