ラジオボタンは、ユーザーが項目のグループから1つだけ選択する必要がある場合に使用します。for 属性は、カスタムラジオボタンを入力とバインドするために必要です。ラベルの for 属性の値として、入力の id を追加します。

グループにラジオボタンを追加するには、グループ内の各ラジオボタンに対応する同じ値とともに name 属性を追加します。無効なラジオボタンを作成するには、以下に示すように disabled 属性を追加します。

赤

黄色

緑

茶色

  <form action="#">
    <p>
      <label>
        <input name="group1" type="radio" checked />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
        

ギャップ付き

ギャップのあるラジオボタンを作成するには、入力に class="with-gap" を追加します。以下の例を参照してください。

赤

  <p>
    <label>
      <input class="with-gap" name="group3" type="radio" checked />
      <span>Red</span>
    </label>
  </p>