ラジオボタン
選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 支払い方法など説明付きの選択肢を1つ選ぶ入力
- 選択肢をカードで大きく押しやすくしたいフォーム
- ネイティブの矢印キー操作をそのまま使いたい画面
- 避ける場面
- 選択肢が6つを超える（セレクト）
- 複数選べる項目（チェックボックス）
- 構成要素
- グループ見出し（legend）
- カード
- ラジオ印
- タイトル
- 説明文
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でグループへ入り、↑↓←→ で選択を移動（即座に選ばれる）、Space で選択
- 支援技術
fieldset／legend でグループ名。中身はネイティブ input[type=radio] で role・checked は自動。装飾丸は aria-hidden。リングは :has(:focus-visible) でカードに描く
- 動き
内側の丸 180ms cubic-bezier(0.34,1.36,0.64,1) のバウンスで選択を強調、枠・背景 180ms。reduced-motion で無効
原則一貫性と標準
目的選ばせる
デザインの要点
- 中身はネイティブの input[type=radio] を隠して使う。矢印キーの移動・グループ化・フォームの値が自前実装なしで手に入る
- カード全体を label にして押せる範囲を広げる。丸だけが標的だと、スマホでは外す
- 選択は枠色＋背景＋内側の丸の3つで示す。丸のバウンス 180ms は「入った」手応えで、装飾ではない
- 説明文は1行に収める。長い説明が要る選択肢はカードでなく、別画面で比較させる
実装メモ
見た目はカードですが中身はネイティブの <input type="radio"> なので、同名グループの矢印キー移動やフォーカスがそのまま効きます。選択状態は :has(:checked) で親カードに反映し、フォーカスリングも :has(:focus-visible) で描いています。
コード（コピーして使えます）
<form class="rg-form" novalidate>
<fieldset class="rg-fieldset">
<legend class="rg-legend">お支払い方法</legend>
<label class="rg-card">
<input class="rg-radio" type="radio" name="pay" value="card" checked />
<span class="rg-mark" aria-hidden="true"></span>
<span class="rg-body">
<span class="rg-title">クレジットカード</span>
<span class="rg-desc">Visa / Master / JCB に対応</span>
</span>
</label>
<label class="rg-card">
<input class="rg-radio" type="radio" name="pay" value="bank" />
<span class="rg-mark" aria-hidden="true"></span>
<span class="rg-body">
<span class="rg-title">銀行振込</span>
<span class="rg-desc">入金確認後の発送になります</span>
</span>
</label>
<label class="rg-card">
<input class="rg-radio" type="radio" name="pay" value="cod" />
<span class="rg-mark" aria-hidden="true"></span>
<span class="rg-body">
<span class="rg-title">代金引換</span>
<span class="rg-desc">別途手数料 330円</span>
</span>
</label>
</fieldset>
</form>