フォーム入力
ラジオボタン
選択肢をカード状に並べたラジオグループ。ネイティブの input を使うので矢印キーで移動でき、選んだカードだけ枠と丸が色づく。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
見た目はカードですが中身はネイティブの <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>