チェックボックス
React Ariaで実装した16pxのチェックボックス。選択済みと一部選択の状態は、Figmaと同じ内側のハイライトとプライマリのグラデーションを表示します。チェックマークは線を描くアニメーションで現れます。
インストール
CLI または手動でこのチェックボックスコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add checkbox共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
2つのサイズを経由して サイズ: プロップ - md の (16px、デフォルト) および サインイン (14px、密なテーブルで使用されます)。
<Checkbox size="md" defaultSelected /> {/* 16px (default) */}<Checkbox size="sm" defaultSelected /> {/* 14px */}ラベル及び制御
パス お子様 ラベル用 - React Aria は入力を自動で関連付けます。 isSelected + onChange 制御された状態のため、または defaultSelected 制御不能のため。
{/* children become the label - clicking it toggles the box */}<Checkbox defaultSelected>Remember me</Checkbox><Checkbox>Send me product updates</Checkbox>
{/* Controlled */}<Checkbox isSelected={checked} onChange={setChecked}>Terms</Checkbox>カード
タイトルとオプションの記述を備えた選択可能なカード - カード全体がチェックボックスをトグルし、ホバーの背景を表示します。 それは別のレジストリ項目です。 npx boardui add checkbox-card.
import { CheckboxCard } from "@/components/base/checkbox/checkbox-card";
<CheckboxCard title="Item title" description="This is for you to check." /><CheckboxCard defaultSelected title="Item title" description="This is for you to check." /><CheckboxCard title="No description" />