Bootstrap5 チェックボックスとラジオボタン
ユーザーに事前定義されたオプションリストから任意の数のオプションを選択させたい場合は、チェックボックスを使用します：
例
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
<label class="form-check-label">Option 1</label>
</div>
試してみる »
チェックボックスは class="form-check" を使用して、ラベルとチェックボックスの間に適切なマージンを確保します。
.form-check-label クラスはラベル要素に追加され、.form-check コンテナ内に .form-check-input クラスを追加してチェックボックスのスタイルを設定します。
checked 属性は、デフォルトで選択されるオプションを設定するために使用されます。
ラジオボタン
ユーザーに事前定義されたオプションリストから1つのオプションを選択させたい場合は、ラジオボタンを使用します：
例
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>
試してみる »
トグルスイッチ
チェックボックスをトグルスイッチに変更したい場合は、.form-checkコンテナ内で.form-switchクラスを使用します:
例
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
試してみる »