CheckBox

ユーザーに「true/false」といった正反対の状態を入力させるコンポーネントです。 input[type='checkbox']の代わりとして使用します。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

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

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

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

複数項目をチェックボックスで選択している状態

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

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

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

Do
Do
すべての選択肢が明示的に表示されてい
るため、現在の状態が把握しやすい
Dont
Don't
「無効」という選択肢が暗黙的であり、
現在の状態をラベルとチェック状態から
推測しなければならない

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

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

削除ダイアログで操作の確認を促す際のチェックボックスの使用例

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

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

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

状態

混在(mixed)

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

よくあるテーブルでの混在状態のチェックボックスの使用例

デザインパターン

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

Props

mixed
falsetrue

true のとき、チェック状態を mixed にする

error
falsetrue

チェックボックスにエラーがあるかどうか