チェック＆ラジオ（Checks and radios） v5.0.0設定変更

入力オプションを選択するには、フォームのカスタムラジオボタンとチェックボックスを使用。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.0.0設定変更

※従来のチェックボックスとラジオボタンの設定とv4のカスタムチェックボックスとラジオボタンのスタイルを組み合わせて、新たなチェックボックスとラジオボタンに一本化した。

アプローチ（Approach）

ブラウザ標準のチェックボックスとラジオボタンは、HTML要素のレイアウトと動作を改善する両方の入力タイプ用の一連のクラスである .form-check の助けで置き換えられ、より大きなカスタマイズとクロスブラウザの一貫性を提供。チェックボックスはリスト内の単独か複数のオプションを選択するためのものであり、ラジオボタンは多数のオプションから1つを選択するためのもの。

構造的には、<label> 内の <input>（親子要素）とは対照的に、<input> と <label> は兄弟要素になる。<input> と <label> を関連付けるために少し冗長になるが id と for 属性を指定する必要がある。:checked や :disabled など全ての <input> の状態には兄弟セレクタ（〜）を使用。.form-check-label クラスと組み合わせると、<input> の状態に基づいて各項目のテキストが簡単にスタイル設定できる。

BootstrapのチェックではカスタムBootstrapアイコンを使ってチェックされた状態か不確定の状態を示す。

チェックボックス（Checks）v5.0.0-alpha1クラス名変更

見本

デフォルトのチェックボックス

チェック済のチェックボックス

Bootstrap5.xの設定例緑背景が変更箇所

<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="checkDefault">
  <label for="checkDefault" class="form-check-label">
    デフォルトのチェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="checkChecked" checked>
  <label for="checkChecked" class="form-check-label">
    チェック済のチェックボックス
  </label>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

従来のチェックボックス
変更なし

カスタム・チェックボックス<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="checkDefault">
  <label for="checkDefault" class="custom-control-label">
    デフォルトのチェックボックス
  </label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="checkChecked" checked>
  <label for="checkChecked" class="custom-control-label">
    チェック済のチェックボックス
  </label>
</div>

【設定】

div.form-check > [input[type="checkbox"].form-check-input《チェックボックス》 + label.form-check-label《ラベル》]
あらかじめチェック済にしておく場合は、input[type="checkbox"].form-check-input に [checked] を入れる

【アクセシビリティの設定】

input.form-check-controlの id 属性の値と、label.form-check-label の for 属性の値を同じにしてチェックボックスとラベルを関連付ける

【変更履歴】

【v5.0.0-alpha1】v4のカスタム・チェックボックスとの変更点：
- div.custom-control.custom-checkbox ⇒ div.form-check
- input.custom-control-input ⇒ input.form-check-input
- label.custom-control-label ⇒ label.form-check-label

不確定チェックボックス（Indeterminate）v5.2.0設定変更

チェックボックスは、JavaScriptを手動で設定した場合には、:indeterminate 疑似クラスを使用できる（指定するためのHTML属性はない）。

見本

不確定チェックボックス

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptdocument.querySelectorAll('.your-checkbox')
  .forEach(checkbox => {
    checkbox.indeterminate = true
  })

HTML<div class="form-check">
  <input type="checkbox" class="form-check-input your-checkbox" id="checkIndeterminate">
  <label for="checkIndeterminate" class="form-check-label">不確定チェックボックス</label>
</div>

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptdocument.addEventListener('DOMContentLoaded', function() {
  var checkbox = document.getElementsByClassName('your-checkbox');
  checkbox.indeterminate = true;
});

※Bootstrap4.xの設定例

JavaScript$(function () {
  $('.your-checkbox').prop('indeterminate', true)
})

HTML<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input your-checkbox" id="checkIndeterminate">
  <label for="checkIndeterminate" class="custom-control-label">不確定チェックボックス</label>
</div>

【設定】

不確定の表示をしたいチェックボックス用に任意のJavaScriptを設定する（上記は .your-checkbox が入ったチェックボックスで表示する例）

【変更履歴】

【v5.0.0-alpha1】
- JavaScriptの記述をjQueryに依存しない方法に変更
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

チェックボックスの無効化（Disabled）v5.2.0一部追加

disabled 属性を追加すると、関連付けられている <label> は自動的に明るい色に合わせてスタイル設定され、入力の無効状態がわかりやすくなる。

見本

無効の不確定チェックボックス

無効チェックボックス

チェック済の無効チェックボックス

設定例

<div class="form-check">
  <input type="checkbox" class="form-check-input your-checkbox" value="" id="checkIndeterminateDisabled" disabled>
  <label class="form-check-label" for="checkIndeterminateDisabled">
    無効の不確定チェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="checkDisabled" disabled>
  <label for="checkDisabled" class="form-check-label">
    無効チェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="checkCheckedDisabled" checked disabled>
  <label for="checkCheckedDisabled" class="form-check-label">
    チェック済の無効チェックボックス
  </label>
</div>

【設定】

無効化したい input.form-check-input に disabled 属性を入れる

【変更履歴】

【v5.2.0】
- 不確定チェックボックスの設定を追加

ラジオボタン（Radios）v5.0.0-alpha1クラス名変更

見本

デフォルトのラジオボタン

選択済のラジオボタン

Bootstrap5.xの設定例緑背景が変更箇所

<div class="form-check">
  <input type="radio" class="form-check-input" name="radioDefault" id="radioDefault1">
  <label for="radioDefault1" class="form-check-label">
    デフォルトのラジオボタン
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="radioDefault" id="radioDefault2" checked>
  <label for="radioDefault2" class="form-check-label">
    選択済のラジオボタン
  </label>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

従来のラジオボタン
変更なし

カスタム・ラジオボタン<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" name="radioDefault" id="radioDefault1">
  <label for="customRadio1" class="custom-control-label">
    デフォルトのラジオボタン
  </label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" name="radioDefault" id="radioDefault2">
  <label for="radioDefault2" class="custom-control-label">この他のカスタムラジオボタンを切替</label>
</div>

【設定】

div.form-check > [input[type="radio"].form-check-input《ラジオボタン》 + label.form-check-label《ラベル》]
あらかじめ選択済にしておく場合は、input[type="radio"].form-check-input に [checked] を入れる

【アクセシビリティの設定】

input.form-check-controlの id 属性の値と、label.form-check-label の for 属性の値を同じにしてラジオボタンとラベルを関連付ける

【変更履歴】

【v5.0.0-alpha1】v4のカスタム・ラジオボタンとの変更点：
- div.custom-control.custom-radio ⇒ div.form-check
- input.custom-control-input ⇒ input.form-check-input
- label.custom-control-label ⇒ label.form-check-label

ラジオボタンの無効化（Disabled）

disabled 属性を追加すると、関連付けられている <label> は自動的に明るい色に合わせてスタイル設定され、入力の無効状態がわかりやすくなる。

見本

無効ラジオボタン

チェック済の無効ラジオボタン

設定例

<div class="form-check">
  <input type="radio" class="form-check-input" name="radioDisabled" id="radioDisabled" disabled>
  <label for="radioDisabled" class="form-check-label">
    無効ラジオボタン
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
  <label for="radioCheckedDisabled" class="form-check-label">
    チェック済の無効ラジオボタン
  </label>
</div>

【設定】

無効化したい <input> に disabled 属性を入れる

切替スイッチ（Switches）v5.0.0-alpha1クラス名変更、v5.1.2設定変更

.form-switch クラスを使用して切替スイッチを表示。role="switch" を使用して、この役割をサポートする支援技術に制御の性質をより正確に伝えてください。古い支援技術では、フォールバックとして単に通常のチェックボックスとして表される。切替スイッチは disabled 属性もサポート。

見本

デフォルトの切替スイッチ

切替済の切替スイッチ

無効な切替スイッチ

無効な切替済の切替スイッチ

Bootstrap5.xの設定例緑背景が変更箇所

デフォルト<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="switchCheckDefault" role="switch">
  <label for="switchCheckDefault" class="form-check-label">デフォルトの切替スイッチ</label>
</div>

切替済<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="switchCheckChecked" role="switch" checked>
  <label for="switchCheckChecked" class="form-check-label">切替済の切替スイッチ</label>
</div>

無効<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="switchCheckDisabled" role="switch" disabled>
  <label for="switchCheckDisabled" class="form-check-label">無効な切替スイッチ</label>
</div>

無効な切替済<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="switchCheckCheckedDisabled" role="switch" checked disabled>
  <label for="switchCheckCheckedDisabled" class="form-check-label">無効な切替済の切替スイッチ</label>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

デフォルト<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switchCheckDefault">
  <label for="switchCheckDefault" class="custom-control-label">デフォルトの切替スイッチ</label>
</div>

切替済<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switchCheckChecked" checked>
  <label for="switchCheckChecked" class="custom-control-label">切替済の切替スイッチ</label>
</div>

無効<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switchCheckDisabled" disabled>
  <label for="switchCheckDisabled" class="custom-control-label">無効な切替スイッチ</label>
</div>

無効な切替済<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switchCheckCheckedDisabled" checked disabled>
  <label for="switchCheckCheckedDisabled" class="custom-control-label">無効な切替済の切替スイッチ</label>
</div>

【設定】

チェックボックスの設定で .form-check に .form-switch を追加
切替済：input.form-check-input に checked 属性を入れる
無効化：input.form-check-input に disabled 属性を入れる

【アクセシビリティの設定】

input.form-check-controlの id 属性の値と、label.form-check-label の for 属性の値を同じにして切替スイッチとラベルを関連付ける
input.form-check-input に role="switch" 属性（支援技術にスイッチの役割を伝える）を入れる
※チェックボックスでなくオン/オフのスイッチなのを明確にするため

【変更履歴】

【v5.0.0-alpha1】
- .custom-control.custom-switch ⇒ .form-check.form-switch
【v5.1.2】
- input.form-check-input に role="switch" 属性の設定が必要に

ネイティブスイッチ（Native switches）v5.3.6新設

モバイルSafari（iOS 17.4+）用のスイッチとして switch 属性を追加すれば、ネイティブのiOSスイッチのようにスイッチの切替時に触覚フィードバックを有効にすることでスイッチを段階的に強化できる。Bootstrapではすべてのスイッチはカスタムのスタイルを使用しているので、この属性の使用によるスタイルの変更はない。

見本

ネイティブスイッチによる表示

設定例

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" value="" id="checkNativeSwitch" switch>
  <label class="form-check-label" for="checkNativeSwitch">
    ネイティブスイッチによる表示
  </label>
</div>

【設定】

input.form-check-input の role="switch" 属性を switch 属性にする

縦積み（Default(stacked)）

デフォルトでは、直接の兄弟であるチェックボックスとラジオボタンはいくつでも垂直方向に積み重ねられ、.form-check で適切に配置される。

チェックボックス

見本

デフォルトのチェックボックス

無効のチェックボックス

設定例

<div class="mb-3">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" value="" id="defaultCheck1">
    <label for="defaultCheck1" class="form-check-label">
      デフォルトのチェックボックス
    </label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" value="" id="defaultCheck2" disabled>
    <label for="defaultCheck2" class="form-check-label">
      無効のチェックボックス
    </label>
  </div>
</div>

【設定】

div.mb-3 > div.form-check > label.form-check-label > input[type="checkbox"].form-check-input
無効化したい場合は、input.form-check-input に disabled 属性を入れる

ラジオボタン

見本

デフォルトのラジオボタン

デフォルトのラジオボタン2

無効のラジオボタン

設定例

<div class="mb-3">
  <div class="form-check">
    <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label for="exampleRadios1" class="form-check-label">
      デフォルトのラジオボタン
    </label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios2" value="option2">
    <label for="exampleRadios2" class="form-check-label">
      デフォルトのラジオボタン2
    </label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label for="exampleRadios3" class="form-check-label">
      無効のラジオボタン
    </label>
  </div>
</div>

【設定】

div.mb-3 > div.form-check > label.form-check > input[type="radio"].form-check-input
無効化したい場合は、input.form-check-input に disabled 属性を入れる

横並び（Inline）v5.0.0-alpha1クラス名変更

.form-check-inline を任意の .form-check に追加して、同じ水平方向の行にチェックボックスやラジオボタンをグループ化。

チェックボックス

見本

3 (無効)

Bootstrap5.xの設定例緑背景が変更箇所

<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox1" value="option1">
  <label for="inlineCheckbox1" class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox2" value="option2">
  <label for="inlineCheckbox2" class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox3" value="option3" disabled>
  <label for="inlineCheckbox3" class="form-check-label">3 (無効)</label>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

従来のチェックボックス
変更なし

カスタム・チェックボックス<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox1" value="option1">
  <label for="inlineCheckbox1" class="custom-control-label">1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox2" value="option2">
  <label for="inlineCheckbox2" class="custom-control-label">2</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox3" value="option3" disabled>
  <label for="inlineCheckbox3" class="custom-control-label">3 (無効)</label>
</div>

【設定】

チェックボックスの設定で .form-check に .form-check-inline を追加

【変更履歴】

【v5.0.0-alpha1】
- v4のカスタム・チェックボックスとの変更点：.custom-control.custom-checkbox.custom-control-inline ⇒ .form-check.form-check-inline

ラジオボタン

見本

3 (無効)

Bootstrap5.xの設定例緑背景が変更箇所

<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label for="inlineRadio1" class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label for="inlineRadio2" class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label for="inlineRadio3" class="form-check-label">3 (無効)</label>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

従来のラジオボタン
変更なし

カスタム・ラジオボタン<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label for="inlineRadio1" class="custom-control-label">1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label for="inlineRadio2" class="custom-control-label">2</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label for="inlineRadio3" class="custom-control-label">3 (無効)</label>
</div>

【設定】

ラジオボタンの設定で .form-check に .form-check-inline を追加

【変更履歴】

【v5.0.0-alpha1】
- v4のカスタム・ラジオボタンとの変更点：.custom-control.custom-checkbox.custom-control-inline ⇒ .form-check.form-check-inline

順序を反転（Reverse）v5.2.0新設

.form-check-reverse 修飾子クラスでラベルと関連するチェックボックス、ラジオボタン、スイッチの順序を反転させる。

見本

チェックボックスの順序を反転させる

反転したチェックボックスを無効にする

順序が反転した切替スイッチ

設定例

チェックボックスの場合<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    チェックボックスの順序を反転させる
  </label>
</div>

無効の場合<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    反転したチェックボックスを無効にする
  </label>
</div>

切替スイッチの場合<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse" role="switch">
  <label class="form-check-label" for="flexSwitchCheckReverse">順序が反転した切替スイッチ</label>
</div>

【設定】

.form-check に .form-check-reverse を追加

ラベル無し（Without labels）v5.0.0-alpha1設定変更

ラベルテキストを持たないチェックボックスとラジオボタンでは、それを囲む要素で .form-check を省略。支援技術には、何らかの形式のアクセシビリティに配慮した名前の提供を忘れないようにしてください（例：aria-label の使用など）。詳細については、フォームの概要のアクセシビリティのセクションに記載。

見本

Bootstrap5.xの設定例緑背景が変更箇所

チェックボックス<div>
  <input type="checkbox" class="form-check-input" id="checkboxNoLabel" value="" aria-label="...">
</div>

ラジオボタン<div>
  <input type="radio" class="form-check-input" name="radioNoLabel" id="radioNoLabel" value="" aria-label="...">
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

チェックボックス<div class="form-check">
  <input type="checkbox" class="form-check-input position-static" id="CheckboxNoLabel" value="" aria-label="...">
</div>

ラジオボタン<div class="form-check">
  <input type="radio" class="form-check-input position-static" name="Radio" id="RadioNoLabel" value="" aria-label="...">
</div>

【設定】

div > input.form-check-input

【アクセシビリティの設定】

ラベルテキストの代替として <input> に aria-label 属性（ビジュアルで目的を表現する要素に対するラベル付け）を入れる

【変更履歴】

【v5.0.0-alpha1】
- div.form-check > input.form-check-input.position-static ⇒ div > input.form-check-input（.form-check と .position-static の設定は不要に）

切替ボタン（Toggle buttons）v5.0.0-alpha1設定変更（「ボタンプラグイン」から移動）

<label> 要素で .form-check-label ではなく .btn スタイルを使用して、ボタンのようなチェックボックスとラジオボタンを作成。これらの切替ボタンは、さらに必要に応じてボタングループにグループ化できる。

チェックボックス切替ボタン（Checkbox toggle buttons）

見本

単独切替ボタンチェック済無効

Bootstrap5.xの設定例緑背景が変更箇所

単独切替ボタンの場合<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label for="btn-check" class="btn btn-primary">単独切替ボタン</label>

input:c.btn-check[autocomplete=off]+label.btn.btn-primary
※.btn-primary の部分はお好みのボタンカラーを選んでください

チェック済の場合<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label for="btn-check-2" class="btn btn-primary">チェック済</label>

無効化の場合<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label for="btn-check-3" class="btn btn-primary">無効</label>

※Bootstrap4.xの設定例赤背景が変更箇所

チェック済の場合<div class="btn-group-toggle mb-3" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> チェック済
  </label>
</div>

【設定】

input[type="checkbox"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"]
あらかじめチェック済にしておく場合は、input.btn-check[type="checkbox"]#ID に [checked] を入れる
無効化したい場合は、input[type="checkbox"].btn-check#IDに [disabled] を追加

【変更履歴】

【v5.0.0-alpha1】
- .btn-group-toggle と data-toggle="buttons"（ボタンプラグインの設定）は不要に
- label.btn.btn-{themecolor} > input[type="checkbox"] ⇒ input[type="checkbox"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"]（親<label> 子<input> 要素から兄<input> 弟<label> 要素に）
- チェック済：label.btn.btn-{themecolor} に .active は不要に
【v5.0.0-alpha3】
- 無効化の設定が追加

視覚的には、これらの切替ボタンはボタンプラグイン切替ボタンと同じだが、これらは支援技術では異なった方法で伝えられる。チェックボックスの切替は（外観にもかかわらず、基本的にはまだチェックボックスなので）スクリーンリーダーによって「チェック済」/「チェックなし」として伝えられ、ボタンプラグインの切替ボタンは「ボタン」/「ボタンが押された」として伝えられる。これら2つのアプローチのどちらを選択するかは、作成する切替のタイプとチェックボックスか実際のボタンとして伝えられるときにユーザーに切替が意味をなすかどうかによって異なる。

ラジオ切替ボタン（Radio toggle buttons）

見本

Bootstrap5.xの設定例緑背景が変更箇所

Primaryボタンの場合<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label for="option1" class="btn btn-secondary">選択済</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label for="option2" class="btn btn-secondary">ラジオ</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label for="option3" class="btn btn-secondary">無効</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label for="option4"
 class="btn btn-secondary">ラジオ</label>

基本クラスボタンの場合<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
<label class="btn" for="option5">チェック済</label>

<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
<label class="btn" for="option6">ラジオ</label>

<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
<label class="btn" for="option7">無効</label>

<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
<label class="btn" for="option8">ラジオ</label>

※Bootstrap4.xの設定例赤背景が変更箇所

Primaryボタンの場合<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> 選択済
  </label>

  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> ラジオ
  </label>

  ...
</div>

【設定】

input[type="radio"].btn-check#ID + label.btn[for="ID"]
あらかじめ選択済にしておく場合は、input[type="radio"].btn-check#ID に [checked] を入れる
無効化したい場合は、input[type="radio"].btn-check#IDに [disabled] を追加

【変更履歴】

【v5.0.0-alpha1】
- .btn-group-toggle と data-toggle="buttons"（ボタンプラグインの設定）は不要に
- label.btn.btn-{themecolor} > input[type="radio"] ⇒ input[type="radio"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"]（親<label> 子<input> 要素から兄<input> 弟<label> 要素に）
- 選択済：label.btn.btn-{themecolor} に .active は不要に
【v5.0.0-alpha3】
- 無効化の設定が追加
【v5.3.1】
- 基本クラスボタンの設定を追加

アウトラインスタイル（Outlined styles）v5.0.0-alpha1追加

アウトラインスタイルなど、.btn の様々なバリエーションをサポート。

見本

単体の切替
チェック済

チェック済のSuccessラジオ Dangerラジオ

設定例

単体ボタン<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label for="btn-check-outlined" class="btn btn-outline-primary">単体の切替</label>

チェック済ボタン<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label for="btn-check-2-outlined" class="btn btn-outline-secondary">チェック済</label>

ボタングループ<div class="btn-group">
  <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
  <label for="success-outlined" class="btn btn-outline-success">チェック済のSuccessラジオ</label>

  <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
  <label for="danger-outlined" class="btn btn-outline-danger">Dangerラジオ</label>
</div>

【設定】

.btn-{themecolor} の部分は .btn-outline-{themecolor} でも使用できる

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

チェックボックス・ラジオボタン用の変数：

デフォルトの設定

scss/_variables.scss 内 form-check-variables の設定$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;

切替スイッチ用の変数：

scss/_variables.scss 内 form-switch-variables の設定$form-switch-color:               rgba($black, .25) ;
$form-switch-width:               2em ;
$form-switch-padding-start:       $form-switch-width + .5em ;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") ;
$form-switch-border-radius:       $form-switch-width ;
$form-switch-transition:          background-position .15s ease-in-out ;
$form-switch-focus-color:         $input-focus-border-color ;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") ;
$form-switch-checked-color:       $component-active-color ;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") ;
$form-switch-checked-bg-position: right center ;

前のページ
選択メニュー

次のページ
レンジ入力

チェック＆ラジオ（Checks and radios） v5.0.0設定変更

アプローチ（Approach）

チェックボックス（Checks）v5.0.0-alpha1クラス名変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

不確定チェックボックス（Indeterminate）v5.2.0設定変更

見本

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

※Bootstrap4.xの設定例

【設定】

【変更履歴】

チェックボックスの無効化（Disabled）v5.2.0一部追加

見本

設定例

【設定】

【変更履歴】

ラジオボタン（Radios）v5.0.0-alpha1クラス名変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

ラジオボタンの無効化（Disabled）

見本

設定例

【設定】

切替スイッチ（Switches）v5.0.0-alpha1クラス名変更、v5.1.2設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

ネイティブスイッチ（Native switches）v5.3.6新設

見本

設定例

【設定】

縦積み（Default(stacked)）

チェックボックス

見本

設定例

【設定】

ラジオボタン

見本

設定例

【設定】

横並び（Inline）v5.0.0-alpha1クラス名変更

チェックボックス

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【変更履歴】

ラジオボタン

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【変更履歴】

順序を反転（Reverse）v5.2.0新設

見本

設定例

【設定】

ラベル無し（Without labels）v5.0.0-alpha1設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

切替ボタン（Toggle buttons）v5.0.0-alpha1設定変更（「ボタンプラグイン」から移動）

チェックボックス切替ボタン（Checkbox toggle buttons）

見本

Bootstrap5.xの設定例 緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所