Checkbox
複数の選択肢を同時にオン・オフできる選択コントロール。利用規約への同意・通知設定など、独立した複数の項目を選択させるときに使う。
インストール
npx shoji add checkbox
プレビュー
States
続けるには同意が必要です
パターン
Indeterminate
全選択・部分選択・未選択の3状態を持つ「すべて選択」チェックボックス。テーブル行の一括操作で必須。
checkboxtableselect-all
With Description
タイトル + 説明文の2段組チェックボックス。SaaS の設定画面・権限設定で頻出のパターン。
checkboxsettingspermissions
Agreement
利用規約・プライバシーポリシーへの同意チェックボックス。リンク埋め込み付き・未チェック時のエラー表示込みの完成形。
checkboxlegalconsent
使い方
こんなときに使う
- 複数の項目を同時に選択できる場合（「通知を受け取る」「メルマガを購読する」など独立した設定）
- 利用規約・プライバシーポリシーへの同意（1つの確認アクション）
- 「すべて選択」と組み合わせるリスト操作
使わないほうがいい場面
- 「どれか1つだけ選ぶ」用途（RadioGroup を使う）
- オン・オフの切り替えだけが目的の場合（Switch のほうが意図が明確）
JP 最適化のポイント
- 視覚サイズ size-4（16px）を維持しながら、after 疑似要素で 44px のタッチターゲットを確保 — デザインの密度を保ちながら WCAG 基準を満たす
- チェックボックスグループには必ず fieldset + legend を使う — スクリーンリーダーがグループとしてまとめて読み上げる