本文へスキップ

チェックボックス・トグル・ラジオ

選ぶ入力を、チェックボックス・トグルスイッチ・ラジオのどれにする?

判断表

判断軸チェック描画
有無を選ぶ、複数可
トグルスイッチ
ON/OFF が即座に効く
ラジオボタン
複数から1つだけ選ぶ
選べる数いくつでも。0個も可1項目の ON/OFF必ず1つ。0個は不可(初期値を持つ)
反映のタイミング送信ボタンを押したとき切り替えた瞬間(保存ボタンを付けない)送信ボタンを押したとき
文言の形「〜に同意する」「〜を含める」など動詞「通知」「ダークモード」など状態の名前「クレジットカード」「銀行振込」など選択肢の名前
支援技術ネイティブ input で読み上げ・Space が効くrole=switch・aria-checked を見本が付けているfieldset/legend + input で矢印キー移動が効く
モバイルの標的箱は小さいので label 全体をタップ領域にするつまみが大きく指で扱いやすい見本はカード全体が標的で押しやすい

迷ったらこれ

迷ったら、送信するフォームの中ならチェックボックス(複数可)かラジオ(1つ)、設定画面で押した瞬間に効かせるならトグル。ただし送信が要る画面にトグルを置くと「もう効いた」と誤解されるので混ぜない。

選択肢が5個を超えるラジオはセレクトかリストへ。選択肢に説明文が要るなら、見本のようなカード型ラジオにすると比較しやすい。

候補の見本

  • クリック

    チェック描画解説あり

    Animated Checkbox

    チェック時にレ点が線で描かれるアニメーション。操作の手応えを視覚で強調する。

  • クリック

    トグルスイッチ解説あり

    Toggle Switch

    クリックでつまみが滑らかにスライドする ON/OFF スイッチ。設定画面の定番UIパターン。

  • クリック

    ラジオボタン

    Radio Group

    選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。