お問い合わせカテゴリ選択ラジオ
このパーツは、お問い合わせの種別を最初に選ばせる カードラジオ です。 input type="radio" を opacity:0 で隠し、隣接する span をカード状に見せることで、ネイティブのラジオでありながら大きく押しやすい選択肢に変えています。
解説
このパーツは、お問い合わせの種別を最初に選ばせるカードラジオです。input type="radio" を opacity:0 で隠し、隣接する span をカード状に見せることで、ネイティブのラジオでありながら大きく押しやすい選択肢に変えています。同じ name="t" でグループ化しているため、1つだけ選べる排他制御はブラウザ任せで JavaScript は不要です。
使う場面
- 「サービス相談 / 採用 / 取材・PR / その他」のように問い合わせを最初に分岐させたいフォーム冒頭
- 申込種別やプラン選択など、択一で答えてほしい入力欄
- 2列グリッドで省スペースに見せたいモバイルフォーム
選択中の見た目は :checked に隣接 span を当てて色を変えると実装できます。色は枠線・文字色を1か所変えるだけで自社ブランドに馴染みます。opacity:0 はキーボードのフォーカスが見えにくくなりやすいので、:focus-visible 時にカードへ輪郭を出すとアクセシビリティが保てます。各 label がクリック領域を兼ねるため、視覚的なラベルとフォーム値を必ず対応させておきましょう。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
選択肢の数や文言は自由に変えられますか
はい。label をコピーまたは削除して項目を増減できます。grid-template-columns の値を変えれば1列や3列のレイアウトにも調整できます。
JavaScript なしで1つだけ選べる制御はできますか
できます。同じ name 属性を付けたラジオボタンはブラウザが自動で排他選択にするため、追加のスクリプトは不要です。