Bootstrapのラジオボタン【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapのラジオボタンについて、簡単に解説していきます。

基本のHTML

Bootstrapではラジオボタンをdiv要素で囲いましょう。

ラジオボタンを囲うdiv要素のクラス名にはform-checkを与えます。

<div class="form-check">
  <input class="form-check-input" type="radio" name="nationalityRadio" id="japanRadio" checked>
  <label class="form-check-label" for="japanRadio">
    日本国籍
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="nationalityRadio" id="foreignRadio">
  <label class="form-check-label" for="foreignRadio">
    外国籍
  </label>
</div>

上記のコードでは、国籍を選ぶためのラジオボタンを実装しています。

横並びにする

ラジオボタンを横並びにできます。

div要素のクラス名に追加でform-check-inlineを与えます。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="flavorRadio" id="mildRadio1">
  <label class="form-check-label" for="mildRadio1">甘口</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="flavorRadio" id="mediumRadio2">
  <label class="form-check-label" for="mediumRadio2">中辛</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="flavorRadio" id="dryRadio3">
  <label class="form-check-label" for="dryRadio3">辛口</label>
</div>

上記の例では、辛さを選ぶラジオボタンを横並びで配置しています。

トグルボタンにする

ラジオボタンをトグルボタンにすることもできます。

div要素を外し、label要素にbtnクラスを、input要素にform-checkクラスを付与します。

<input type="radio" class="btn-check" name="flavor" id="mild" autocomplete="off">
<label class="btn btn-outline-primary" for="mild">甘口</label>

<input type="radio" class="btn-check" name="flavor" id="medium" autocomplete="off">
<label class="btn btn-outline-primary" for="medium">中辛</label>

<input type="radio" class="btn-check" name="flavor" id="dry" autocomplete="off">
<label class="btn btn-outline-primary" for="dry">辛口</label>

上記のコードの例では、辛さを選ぶラジオボタンをトグルボタンとして表示させています。