ラジオボタン
Radio button
別名: ラジオ、Radio
生態（さわってみる）
一言定義
同じグループの選択肢から必ず1つだけを排他的に選ばせる、丸い入力コントロール。
分類
使う場面
- 選択肢が2〜5個程度で、常にすべてを見せたうえで1つだけ選ばせたいとき
- 何も選ばれていない状態を許したくない（初期値を必ず持たせたい）とき
避ける場面
- 選択肢が多く画面が占有されすぎるとき（→セレクトボックス）
- 複数選択を許したいとき（→チェックボックス）
近縁種との比較
チェックボックスが複数選択・任意選択を許すのに対し、ラジオボタンは同一グループ内で常に ちょうど1つが選ばれている状態を保証する点が本質的な違いである。選択肢が多くなり画面占有が 問題になる場合は、同じ「単一選択」でも省スペースなセレクトボックスに置き換えるのが定石だが、 セレクトボックスは選択肢を開くまで一覧性がない一方、ラジオボタンは全選択肢を常時視認できる という利点を保つ。
実例リンク
アクセシビリティ
- role
- input[type="radio"] を同じ name でグループ化。フォームとしては fieldset + legend でグループ全体にラベルを付ける
- キーボード操作
- 矢印キーで同一グループ内を移動しながら選択（ネイティブ挙動）、Tabはグループの内外のみ移動