選択

選ばせる部品は、選択肢の数と、選んだ瞬間に何が起きるかで決まります。見た目の好みでは決めません。

図を大きく見る

図の中身を文字で読む

• 選択肢の数と性質で部品が決まる　見た目のために独自実装しない
• 複数選べる？　チェックボックス　標準の select はブラウザとOSが描画を担当する。
• はい　絞り込み・同意・興味の選択　モバイルでは画面下から専用のピッカーが出る。
• 独自実装すると、キーボード操作・読み上げ・
• この専用ピッカーをすべて自前で再現することになる。
• 押した瞬間に反映？　トグルスイッチ
• はい　設定画面。保存ボタンなし　ラジオボタンのキーボード挙動も標準にしかない
• グループ全体で1つのタブ位置。矢印キーで移動。
• この挙動は自作では再現しにくい。
• 選択肢は5つ以下？　ラジオボタン
• はい　比較させたい。全部見せる　初期値を入れてよいか
• セレクトは先頭に「選択してください」を置く。
• いいえ →　セレクト　選んだのか初期値なのか区別できなくなるため。
• 20を超える？　コンボボックス
• 打って絞り込む。駅名・市区町村　同意のチェックを初期状態でオンにするのは、
• 多くの地域で法的にも問題になる。

ひと目で#

チェックボックス

複数選べる。単独の同意にも使う

ラジオボタン

1つだけ。選択肢がすべて見えている

セレクト

1つだけ。畳まれている

トグルスイッチ

オンとオフ。押した瞬間に反映される

コンボボックス

打って絞り込む。選択肢が多いとき

スライダー

おおよその値。数値の併記がほぼ必須

使い分け#

間違えやすいところ#

図を大きく見る

図の中身を文字で読む

• いつ反映されるかで選ぶ
• トグルスイッチ
• 押した瞬間に、もう保存されている
• だから送信ボタンを置かない。取り消しは元へ戻す操作で受ける
• チェックボックス
• この時点では、まだ何も起きていない　送信する　ここで確定する
• 選択肢が2つでも、確定に送信が要るならチェックボックス。見た目の新しさで選ばない。
• ✕ フォームの中にトグルを置く　→　押した時点で設定が変わったと誤解され、送信せずに離脱される

• ✕見た目のためにセレクトを自作するキー操作、読み上げ、モバイルの専用ピッカーを全部自前で作り直すことになる
• ✕ラジオボタンの name を揃えない組にならず、複数選べてしまう
• ✕セレクトの先頭を選択済みにする選んだのか初期値なのか見分けられない
• ✕同意のチェックを最初からオンにする多くの地域で、法的にも問題になる
• ✕トグルスイッチをフォームの中で使う送信が要る設定なのに、即時に反映されたと誤解される
• ✕状態を色だけで示すつまみの位置で分かるようにする
• ✕スライダーで今の値を表示しない何を選んだのか分からない
• ✕ラベルを結び付けない押せる範囲が小さくなる

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

貸し会議室の予約フォームです。「ご利用時間帯」は午前・午後・終日の3択なのにセレクトで畳まれていて、開くまで選択肢が見えません。その下の「キャンセル待ちを希望する」はトグルスイッチです。押すと即座に登録されたように見えますが、実際は送信ボタンを押すまで何も起きていません。

時間帯はラジオボタンに開いて、3つを見比べながら選べるようにします。キャンセル待ちはチェックボックスに替えます。トグルは「押した瞬間に反映される」を約束する部品なので、送信で確定するフォームの中に置くと、その約束が嘘になります。

確認する#

• ラジオは組の中で1つしか選べない。複数選べたら name が揃っていない
• トグルは押した瞬間に反映される。送信を待つ項目はチェックボックスになっている
• 文字のラベルを押しても選べる。行の押せる高さが 2.75rem 相当ある

使えるパターン#

• フォーム基本レイアウト
• 同意チェック
• タグ絞り込み（一覧の頭）

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は部品を選ぶにまとめてある。逆引きには全188件。

部品を決める#

選択肢の数と、複数選べるかどうか。この2つを動かすと適合する部品が実物で切り替わり、判断の根拠と fieldset 込みの完成 HTML が付いてきます。

<!-- 1つだけ・4択 → ラジオボタン -->
<fieldset class="choices">
  <legend>ご興味のあるテーマ</legend>
  <label><input type="radio" name="theme" value="color"> 配色</label>
  <label><input type="radio" name="theme" value="type"> 文字</label>
  <label><input type="radio" name="theme" value="spacing"> 余白</label>
  <label><input type="radio" name="theme" value="layout"> レイアウト</label>
</fieldset>

<style>
.choices { display: grid; gap: var(--space-1); border: 0; margin: 0; padding: 0; }
.choices legend { font-weight: 700; padding: 0; margin-block-end: var(--space-2); }
.choices label { display: flex; gap: var(--space-2); align-items: center; min-block-size: 2.75rem; }
.choices-select { display: grid; gap: var(--space-2); justify-items: start; font-weight: 700; }
.choices-select select { font: inherit; font-weight: 400; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); }
</style>

この道具は JavaScript で動きます。無効の場合は、上の使い分けの表で部品を決めてください。

出典#

• Nielsen Norman Group「Checkboxes vs. Radio Buttons」
• WAI-ARIA Authoring Practices Guide

関連#

• 入力ラベルとヘルプ
• フォームの検証選択の必須チェック
• 認知の法則ヒックの法則
• キーボードで使える矢印キーでの移動