Bootstrap 5 チェックボックスとラジオボタン

チェックボックス

ユーザーが事前設定されたオプションリストから任意の数のオプションを選択できるようにする場合は、チェックボックスを使用してください。

例

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">オプション 1</label>
</div>

自分で試してみる

例を説明します

チェックボックスのスタイルを設定するには、 class="form-check" の包装要素を、ラベルとチェックボックスに適切な余白があることを確実にするために使用します。

次に、 .form-check-label クラスを追加して、タグ要素に、 .form-check-input 追加する .form-check コンテナ内で、チェックボックスのスタイルを正しく設定します。

チェックボックスをデフォルトで選択したい場合は、以下を使用します。 checked 属性。

ラジオボタン

ユーザーが設定されたオプションリストから選択できるように制限したい場合は、ラジオボタンを使用します。

例

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>オプション 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">オプション 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>オプション 3
  <label class="form-check-label"></label>
</div>

自分で試してみる

スイッチを切り替える

チェックボックスをスイッチのスタイルに設定したい場合は、以下の .form-switch クラスと .form-check コンテナを一緒に使用する：

例

<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">ダークモード</label>
</div>

自分で試してみる