【UIパーツ大全】ラジオボタン[radio button]参考パーツ一覧

WebサイトやアプリケーションのUI設計において、ラジオボタン（radio button）は定番のフォームパーツです。複数の選択肢から「1つだけ」選ぶ場面で多用され、シンプルながらも重要な役割を担います。

本記事ではラジオボタンの基本構造、設計のポイント、主要UIライブラリにおける実装例までを解説します。Webデザイナーやフロントエンド開発者はもちろん、UI/UXに関わるすべての方にとって参考になる内容を網羅しています。

ラジオボタンとは？

ラジオボタンは一つだけ選べる選択肢を提示するためのUIコンポーネントです。HTMLでは以下のように記述します。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

同じname属性を持つラジオボタンは排他的選択（mutually exclusive）となり、一つを選ぶと他が自動で解除されます。

ラジオボタンの主な用途

ラジオボタンは以下のような場面で使われます。

• 性別や年齢など、限定的なカテゴリ選択
• 支払い方法の選択（例：クレジットカード、銀行振込、代引き）
• 表示形式の切り替え（例：リストビュー / グリッドビュー）
• アンケートやフォームの質問項目（単一回答）

複数選択が可能なチェックボックスと混同されがちですが、使い分けが重要です。

UI/UX設計での注意点

選択肢は3～5個が理想

選択肢が多すぎるとラジオボタンのUIは煩雑になります。5つを超える場合はドロップダウンやセレクトボックスの方が適しています。

初期状態を明確に

あらかじめデフォルトで1つを選んでおくことでユーザーの迷いを減らせます。ただし「強制選択」がUXを悪化させるケースでは未選択状態を維持する選択もあり得ます。

ラベルは明確に記述する

曖昧な言葉（例：「はい」「いいえ」）ではなく、具体的な選択肢がユーザーに優しい設計です。

ラジオボタンのデザインパターン

ラジオボタンはスタイルを変えることでユーザー体験を向上できます。以下は代表的なパターンです。

標準的な円形ラジオボタン

最も一般的。OSやブラウザのデフォルトスタイルが適用されます。

カスタムスタイル（カード型／ボタン型）

視認性やタップ領域を広げるため、ボタンやカードのように見せる手法です。CSSやUIライブラリで簡単に実装可能。

.radio-card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.radio-card input[type="radio"] {
  display: none;
}

アイコン付きラジオボタン

選択肢にアイコンや画像を添えると、視覚的に理解しやすくなります。

アクセシビリティ（a11y）対応

ラジオボタンはフォームの基本要素であり、アクセシビリティへの配慮が非常に重要です。

• labelタグを使ってクリックしやすくする
• fieldsetとlegendでグループ化する
• キーボード操作に対応しているか確認する
• ARIA属性は基本的に不要（ネイティブ要素が最適）

<fieldset>
  <legend>性別を選んでください</legend>
  <label><input type="radio" name="gender" value="male"> 男性</label>
  <label><input type="radio" name="gender" value="female"> 女性</label>
</fieldset>

主要UIライブラリにおける実装例

■ Bootstrap

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked>
  <label class="form-check-label" for="radio1"> オプション1 </label>
</div>

■ Material UI（React）

<RadioGroup
  aria-label="gender"
  defaultValue="female"
  name="radio-buttons-group"
>
  <FormControlLabel value="female" control={<Radio />} label="女性" />
  <FormControlLabel value="male" control={<Radio />} label="男性" />
</RadioGroup>

■ Tailwind CSS + Headless UI

Tailwind CSSではスタイルは自前で定義する必要がありますが、Headless UIと組み合わせると柔軟にカスタマイズ可能です。

よくあるミスとその対策

ラジオボタン vs セレクトボックス

まとめ

• ラジオボタンは単一選択肢の提示に最適
• 選択肢は少数に絞る
• 明確なラベルとアクセシビリティへの配慮を忘れない
• デザイン性とユーザビリティのバランスを保つ
• UIライブラリを使う場合も、HTMLの基本構造は尊重する