ラジオボタンとは

複数の選択肢の中から 1 つだけを選ぶ、丸い入力部品。

概要

複数の選択肢の中から必ず 1 つだけを選ばせる丸い入力部品です。名前は昔のラジオの選局ボタン（1 つ押すと他が戻る仕組み）に由来します。同じ name 属性を持つ <input type="radio"> をグループ化すると、1 つ選ぶと他の選択が自動的に外れる挙動になります。チェックボックスと同様、ネイティブのまま accent-color で色を変える方法と、見た目を丸ごと CSS で作り直す方法があります。

別名

表記ゆれ：ラジオ、単一選択、radio button

「単一選択」は挙動を説明する言葉で、部品の名前としては「ラジオボタン」が一般的です。

AI への伝え方

「配送方法をラジオボタンで 1 つだけ選べるようにして」のように伝えます。選択肢が増えたときに縦並びか横並びかで見え方が変わるので、並べ方の希望も伝えると認識のズレを防げます。

似たパーツとの違い

「チェックボックス」は複数の選択肢を同時に選べる部品で、ラジオボタンは 1 つしか選べない点が異なります。「セレクトボックス」も 1 つだけ選ぶ部品ですが、選択肢を折りたたんで表示する分、選択肢がすべて見えているラジオボタンより省スペースという違いがあります。

デモ

アクセントカラーで着色（ネイティブ）通常配送（無料）お急ぎ便（+300 円）

カスタムの見た目月額プラン年額プラン

コード

HTML

<div class="radio-button-demo">
  <fieldset class="radio-button-demo__group">
    <legend class="radio-button-demo__legend">アクセントカラーで着色（ネイティブ）</legend>
    <label class="radio-button-demo__row" for="radio-button-demo-1">
      <input class="radio-button-demo__native" type="radio" name="radio-button-demo-shipping" id="radio-button-demo-1" checked />
      通常配送（無料）
    </label>
    <label class="radio-button-demo__row" for="radio-button-demo-2">
      <input class="radio-button-demo__native" type="radio" name="radio-button-demo-shipping" id="radio-button-demo-2" />
      お急ぎ便（+300 円）
    </label>
  </fieldset>

  <fieldset class="radio-button-demo__group">
    <legend class="radio-button-demo__legend">カスタムの見た目</legend>
    <label class="radio-button-demo__row" for="radio-button-demo-3">
      <span class="radio-button-demo__custom">
        <input class="radio-button-demo__custom-input" type="radio" name="radio-button-demo-plan" id="radio-button-demo-3" checked />
        <span class="radio-button-demo__dot" aria-hidden="true"></span>
      </span>
      月額プラン
    </label>
    <label class="radio-button-demo__row" for="radio-button-demo-4">
      <span class="radio-button-demo__custom">
        <input class="radio-button-demo__custom-input" type="radio" name="radio-button-demo-plan" id="radio-button-demo-4" />
        <span class="radio-button-demo__dot" aria-hidden="true"></span>
      </span>
      年額プラン
    </label>
  </fieldset>
</div>

CSS

.radio-button-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: sans-serif;
}

.radio-button-demo__group {
  border: 0;
  margin: 0;
  padding: 0;
}

.radio-button-demo__legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 12px;
  color: #666;
}

.radio-button-demo__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.radio-button-demo__native {
  width: 18px;
  height: 18px;
  accent-color: #0017c1;
  cursor: pointer;
}

.radio-button-demo__native:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.radio-button-demo__custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #b3b3b3;
  border-radius: 50%;
  background: #fff;
}

.radio-button-demo__custom-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.radio-button-demo__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0017c1;
  display: none;
}

.radio-button-demo__custom-input:checked ~ .radio-button-demo__dot {
  display: block;
}

.radio-button-demo__custom:has(.radio-button-demo__custom-input:checked) {
  border-color: #0017c1;
}

.radio-button-demo__custom:has(.radio-button-demo__custom-input:focus-visible) {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}