CheckBox

input[type="checkbox"]の代わりに使用するコンポーネントです。
見た目をやや大きく変えているだけでほぼ機能に変わりはありません。

使用上の注意

選択肢が複数選択できる場合に使用する

チェックボックスは選択肢を複数選択できる場合に使用します。

• 複数の選択肢から単一選択しかできず、表示領域に余裕がある場合は原則としてRadioButtonを検討してください。
• 選択肢が多い場合や表示領域が狭い場合は、SelectやComboBoxを検討してください。

「ON/OFF」といった2択の切り替え入力に使用しない

チェックボックスは、「ON/OFF」「有効/無効」「はい/いいえ」といった2択の切り替え入力には原則として使用しないでください。

「ON/OFF」などのブール値で制御できる項目にチェックボックスを使用した場合、一方の選択肢が暗黙的になりチェック状態から現在の選択状態が認識しづらくなる場合があります。 こうした場合には、選択肢を明示的に表示できるRadioButtonを使用してください。

Do

すべての選択肢が明示的に表示されてい
るため、現在の状態が把握しやすい

Don't

「無効」という選択肢が暗黙的であり、
現在の状態をラベルとチェック状態から
推測しなければならない

例外として、以下のようにユーザーに操作内容の確認を促す手段としてチェックボックスを単独で使用することがあります。

• 利用規約などユーザーに許諾を得る必要がある内容の確認を促す場合
• 削除ダイアログなど、重要な操作を行なう場合でユーザーに注意事項の確認を促す場合

submitなしに即時反映するUIとして使用しない

チェックボックスは1クリックで状態が正反対の結果になるため、誤入力による意図しない結果の反映を避けるために、原則として入力後に「送信」や「保存」といったtype属性がsubmitのボタンによって入力確定するフォーム画面などで使用してください。

よくあるテーブルで「表示/非表示」を切り替える場合や、表示領域上submitのボタンの配置が難しい場合など、即時反映を前提とする箇所ではSwitchを使用してください。

状態

混在（mixed）

テーブル内の一括操作の「一括選択するチェックボックス」など、複数のチェックボックスの状態をまとめて示す必要があるチェックボックスにおいて、選択状態と未選択状態が混ざっている状態を示す場合には、混在選択状態（mixed=true）を採用します。

デザインパターン

設定画面によくある複数の設定項目でチェックボックスを整列して表示する場合などは、共通設定の操作権限項目のデザインパターンを参考にしてください。

Props