Radio

複数の選択肢から1つを選ぶラジオボタンコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/radio.json

Usage

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

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"ラジオボタンのサイズ
errorbooleanfalseエラー状態を表示する
disabledbooleanfalse無効状態にする