ラジオボタン
component複数の選択肢から、どれか 1 つだけを選ぶ入力パーツです。
body × state
size = medium · isInvalid=false
isInvalid=true
境界線 / 内側のドットが negative 系
size
small (16) / medium (24)
small
medium
使用例
Label Control と組み合わせて
設定はあとから変更できます
機能
このコンポーネントの用途
排他的な単一選択に使うフォーム部品。
複数選択は checkbox、選択肢が多いなら selector（ドロップダウン）。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓同じ name でグループ化し、ラベル全体を押せるようにする（キーボード・スクリーンリーダー対応もほぼ自動で得られる）。
- ✓安全な初期値を選択しておく。
- ✓グループが複数あるときは fieldset/legend や Label Control の見出しで区切る。
- ✓選択肢で網羅しきれない場合は「その他」を用意する。
NG
- ✕複数選択に radio を使わない → checkbox。
- ✕選択肢が多すぎる時に radio を大量に並べない → selector。
- ✕選択した瞬間に送信・ページ遷移を実行しない → 確定ボタンを挟む。
ラベルは radio-label で内包
クリック領域とアクセシブルネーム
<label class="radio-label"> でテキストごと包む。文字クリックでも選択でき、名前も自動で結び付く。
<label class="radio-label"> <input type="radio" name="ch" class="radio" />メールで受け取る </label>
input とテキストを別要素で並べない。文字クリックで選択できず、名前も結び付かない。
<input type="radio" name="ch" class="radio" /> <span>メールで受け取る</span>
NG パターン
ラジオボタンのレイアウト原則ラジオボタンは縦並びで配置する。1 視線で全選択肢を上から下へ走査でき、選択肢が増えても自然に拡張できる。
<fieldset class="radio-group"> <!-- flex-col --> <label class="radio-label">…</label> </fieldset>
ラジオボタンを横並びで使用することは避けてください。視線が左右に飛び、選択肢同士のグルーピングが弱くなり、選択肢の追加・改行で崩れやすくなります。
<div class="flex flex-wrap gap-6"> <label class="radio-label">…</label> </div>
関連ガイドライン
Don't / Good パターン集
ラジオボタンのアクセシビリティ
ネイティブ <input type="radio"> を土台に、DS が役割・状態・フォーカスを担保します。同じ name のグループは 1 タブストップで、選択は矢印キーで移動します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
選択は内側ドットで示し、エラーは色だけでなく境界色＋テキストで伝える。選択肢は縦並びで走査しやすくする。
サイズは rem / トークンで拡大に追従。md は 24px でターゲットを確保し、リフローで縦積みに崩れても機能を失わない。
Tab でグループに入り、↑↓←→ で選択を移動（移動と同時に選択）。ラベルのテキストクリックでも選べる。
fieldset＋legend のグループ内で、各 radio は checked 状態と「n / m」の位置と共に読まれる。name でグループ化が前提。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
<input type="radio">ベース — 役割・名前・状態と矢印キー操作が標準で確立 - ✓フォーカスリング
--shadow-focus-ring（:focus） - ✓
radio-labelがクリック領域を広げ、ラベルを名前に結び付ける - ✓エラーは
radio-errorの境界色で表現（色＋テキスト併用を前提） - ✓
mdは 24px でターゲット最小（WCAG 2.5.8）を満たす
実装時の必須対応
プロダクト側で担保する
- !同じグループの radio には必ず同じ
nameを付ける（単一選択の要） - !グループは
<fieldset>＋<legend>（またはlabel-control）で見出しを付ける - !各 radio に
radio-labelでラベルを内包する - !エラー時は
aria-invalid="true"＋aria-describedbyでメッセージをグループに関連付け
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | グループへ出入りする（グループ内は 1 タブストップ） |
| ↑ ↓ ← → | グループ内で選択を移動する（移動と同時に選択） |
| Space | フォーカス中の項目を選択する |
- SRグループ名（legend）と共に「ラジオボタン、選択済 / 未選択、n / m」が読まれる
- 操作矢印キーで選択が移動し、グループ外の radio が影響を受けない（name の分離）
- 自動axe / Lighthouse で name グループ化・
fieldset/legend・コントラストを確認
同じグループは同じ name
達成基準：WCAG 1.3.1 情報及び関係性 / 4.1.2 名前・役割・値
同じ name で 1 つだけ選べる。矢印キー移動もグループ内で完結する。
<input type="radio" name="plan" />Free <input type="radio" name="plan" />Pro
name がばらばらだと排他にならず、複数選べてしまう（右で全部 selected）。
<input type="radio" name="a" />Free <input type="radio" name="b" />Pro