Radio
複数の選択肢から1つを選ぶラジオボタンコンポーネント。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/radio.jsonUsage
import { Radio } from "@/components/ui/radio";
import { Label } from "@/components/ui/label";
<div className="flex flex-col gap-3">
<div className="flex items-center gap-2">
<Radio id="radio-1" name="plan" defaultChecked />
<Label htmlFor="radio-1">フリープラン</Label>
</div>
<div className="flex items-center gap-2">
<Radio id="radio-2" name="plan" />
<Label htmlFor="radio-2">プロプラン</Label>
</div>
<div className="flex items-center gap-2">
<Radio id="radio-3" name="plan" />
<Label htmlFor="radio-3">エンタープライズ</Label>
</div>
</div>Size
<Radio size="sm" name="size-demo" />
<Radio size="md" name="size-demo" />
<Radio size="lg" name="size-demo" />Invalid
<Radio error />Disabled
<Radio disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | ラジオボタンのサイズ |
| error | boolean | false | エラー状態を表示する |
| disabled | boolean | false | 無効状態にする |