カード型ラジオボタン（料金プラン選択）
カード型ラジオボタンは、通常は小さな丸印で表す選択肢を、料金プランや配送方法のような 面積の大きいカード に置き換えた UI です。実装は label で input type="radio" を囲み、本来のラジオは opacity:0 で視覚的に隠したうえで、隣り合う .rc__body の枠線や背景を :che…
解説
カード型ラジオボタンは、通常は小さな丸印で表す選択肢を、料金プランや配送方法のような面積の大きいカードに置き換えた UI です。実装は label で input type="radio" を囲み、本来のラジオは opacity:0 で視覚的に隠したうえで、隣り合う .rc__body の枠線や背景を :checked 状態に応じて切り替えています。JavaScript は不要で、同じ name 属性によって 1 つだけ選べる排他制御もブラウザ側が自動で担当します。
使うと効果的な場面
- Starter / Pro / Business のような料金プラン選択
- 通常配送・速達などの配送方法の選択
- サービスタイプやコース選択の申込フォーム
カスタマイズは .rc__body の border や選択時の色を変えるだけでブランドに馴染みます。各カードに価格や説明を strong と span で並べられるので情報量を増やせます。隠した input はキーボードの矢印キーでも操作できますが、フォーカス時に枠が光るスタイルを足すと、見た目だけに頼らずアクセシビリティが上がります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
JavaScript なしで動きますか？
はい。選択の切り替えはラジオボタン本来の :checked 状態と CSS だけで実装しているため、JavaScript は不要です。同じ name 属性を付けることで、1 つだけ選べる動作もブラウザが自動で処理します。
選択中のカードの色を変えたいです
CSS の .rc input:checked + .rc__body に対応するルールで枠線色と背景色を指定しているので、その色コードをブランドカラーに書き換えてください。境界線を太くしたり影を足したりすると、選択状態がさらに分かりやすくなります。