UI Component Lab English

← コンポーネント一覧

入力

Checkbox チェックボックス

チェックを付けたり外したりする小さな四角。グループ内でいくつでも選べる。

トッピング

見分けるポイント

ラベルの横に小さな四角がある。選ぶとチェックマークが付き、一部だけ選ばれた親には横線が出る。

挙動

  • 四角かラベルをクリックすると、チェックが付いたり外れたりする。
  • 子の一部だけが選ばれているとき、親のチェックボックスは中間状態になる。親を押すと子をすべて選ぶ。
  • 関連するチェックボックスは fieldset と legend でまとめ、グループに名前を付ける。

キーボード操作

キー動作
Tabチェックボックス間を移動する。
Spaceフォーカス中のチェックを付ける・外す。

使い分け・注意点

  • 複数の選択や、単独のオン・オフの選択に使う。
  • ボックスはラベルの左に置く。
  • ラジオボタン: チェックボックスはいくつでも選べるが、ラジオボタンは1つだけ選ぶ。
  • スイッチ: チェックボックスは送信ボタンで後から確定することが多く、スイッチは切り替えるとすぐに反映される。

出典