Checkbox

選択状態を切り替えるチェックボックスコンポーネント。

Installation

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

Usage

利用規約に同意する

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

<Checkbox id="checkbox-basic" />
<Label htmlFor="checkbox-basic">利用規約に同意する</Label>

Size

Small

Medium

Large

<Checkbox size="sm" />
<Checkbox size="md" />
<Checkbox size="lg" />

Invalid

エラーのある項目

<Checkbox error />

Disabled

無効な項目

<Checkbox disabled />

Props

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	チェックボックスのサイズ
error	boolean	false	エラー状態を表示する
disabled	boolean	false	無効状態にする