kaze風
Checkbox
チェックボックス
プレビュー
使いどころ
使う場面
- 送信ボタンで確定するフォームでの、オン・オフの選択（利用規約への同意、通知を受け取る）
- 複数の選択肢から、0 個以上を選ぶとき（複数選択）
- 「同意する」のように、チェックしていないとき送信できない確認
使わない場面
- 切り替えた瞬間に設定が反映される項目。Switch を使う
- 選択肢から 1 つだけを選ぶとき。Radio か Select を使う
- 一覧の絞り込み条件。FilterPill のほうが、並べて見せるときに場所を取らない
- 操作の実行。Button を使う
使い方
<Checkbox label="同意する" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | なし | チェックボックスのラベルテキスト |
error | boolean | なし | エラー状態にする（aria-invalid が付く）。aria-invalid を直接渡してもよい |
checked | boolean | false | 選択状態 |
onChange | (e: ChangeEvent) => void | なし | 変更時のコールバック |
id | string | なし | 要素のID（labelとの紐付けに使用） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | チェックボックスにフォーカスを移す |
| Space | オンとオフを切り替える |
アクセシビリティ
- ブラウザ標準の checkbox を使っているので、状態の読み上げはブラウザに任せられる
- label を渡すとクリックできる範囲がラベル全体に広がる。ラベルのない単独利用では aria-label を付ける
- error で aria-invalid が付く。理由は近くに文言で書き、aria-describedby で結ぶ
文言
- 「メールで通知を受け取る」のように、オンにしたときの状態を肯定形で書く。「受け取らない」の否定形は避ける
- 同意は「利用規約に同意する」のように、何に同意するかをラベルに入れる