アプローチ(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="formCheckDefault">
<label class="form-check-label" for="formCheckDefault">
標準のチェックボックス
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" value="" id="formCheckChecked" checked>
<label class="form-check-label" for="formCheckChecked">
チェック済のチェックボックス
</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のチェックボックス
変更なし
カスタム・チェックボックス<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="formCheckDefault">
<label class="custom-control-label" for="formCheckDefault">
標準のチェックボックス
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="formCheckChecked" checked>
<label class="custom-control-label" for="formCheckChecked">
チェック済のチェックボックス
</label>
</div>
【設定】
div.form-check
> [input.form-check-input[type="checkbox"]
《チェックボックス》 +label.form-check-label
《ラベル》]input.form-check-input#ID
+label.form-check-label[for="ID"]
でチェックボックスとラベルを関連付ける- あらかじめチェック済にしておく場合は、
input.form-check-input[type="checkbox"]
に[checked]
を入れる
【変更履歴】
- 【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.0.0-alpha1設定変更
チェックボックスは、JavaScriptを手動で設定した場合には、:indeterminate
疑似クラスが使用可能(指定するためのHTML属性はない)。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
JavaScriptdocument.addEventListener('DOMContentLoaded', function() {
var checkbox = document.getElementsByClassName('your-checkbox');
checkbox.indeterminate = true;
});
HTML<div class="form-check">
<input type="checkbox" class="form-check-input your-checkbox" id="formCheckIndeterminate">
<label class="form-check-label" for="formCheckIndeterminate">不確定チェックボックス</label>
</div>
※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="formCheckIndeterminate">
<label class="custom-control-label" for="formCheckIndeterminate">不確定チェックボックス</label>
</div>
【設定】
- 不確定の表示をしたいチェックボックス用に任意のJavaScriptを設定する(上記は
.your-checkbox
が入ったチェックボックスで表示する例)
特定のIDの入っているチェックボックスのみで表示させたい場合は上記のJavaScriptの設定で
の部分をdocument.getElementsByClassName('クラス名')
にするdocument.getElementById('ID名')
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
チェックボックスの無効化(Disabled)
disabled
属性を追加すると、関連付けられている <label>
は自動的に明るい色に合わせてスタイル設定され、入力の無効状態がわかりやすくなる。
見本
設定例
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="formCheckDisabled" disabled>
<label class="form-check-label" for="formCheckDisabled">
無効チェックボックス
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="formCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="formCheckCheckedDisabled">
チェック済の無効チェックボックス
</label>
</div>
【設定】
- 無効化したい
<input>
にdisabled
属性を入れる
ラジオボタン(Radios)v5.0.0-alpha1クラス名変更
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check">
<input type="radio" class="form-check-input" name="formRadioDefault" id="formRadioDefault1">
<label class="form-check-label" for="formRadioDefault1">
標準のラジオボタン
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="formRadioDefault" id="formRadioDefault2" checked>
<label class="form-check-label" for="formRadioDefault2">
選択済のラジオボタン
</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のラジオボタン
変更なし
カスタム・ラジオボタン<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="formRadioDefault" id="formRadioDefault1">
<label class="custom-control-label" for="customRadio1">
標準のラジオボタン
</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="formRadioDefault2" name="formRadioDefault">
<label class="custom-control-label" for="formRadioDefault2">この他のカスタムラジオボタンを切替</label>
</div>
【設定】
div.form-check
> [input.form-check-input[type="radio"]
《ラジオボタン》 +label.form-check-label
《ラベル》]input.form-check-input#ID
+label.form-check-label[for="ID"]
でラジオボタンとラベルを関連付ける- あらかじめ選択済にしておく場合は、
input.form-check-input[type="radio"]
に[checked]
を入れる
【変更履歴】
- 【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 class="form-check-input" type="radio" name="formRadioDisabled" id="formRadioDisabled" disabled>
<label class="form-check-label" for="formRadioDisabled">
無効ラジオボタン
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="formRadioDisabled" id="formRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="formRadioCheckedDisabled">
チェック済の無効ラジオボタン
</label>
</div>
【設定】
- 無効化したい
<input>
にdisabled
属性を入れる
切替スイッチ(Switches)v5.0.0-alpha1クラス名変更
.form-switch
クラスを使用して切替スイッチを表示。切替スイッチは disabled
属性もサポート。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="formSwitchCheckDefault">
<label class="form-check-label" for="formSwitchCheckDefault">標準の切替スイッチ</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="formSwitchCheckChecked" checked>
<label class="form-check-label" for="formSwitchCheckChecked">選択済の切替スイッチ</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="formSwitchCheckDisabled" disabled>
<label class="form-check-label" for="formSwitchCheckDisabled">無効な切替スイッチ</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="formSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="formSwitchCheckCheckedDisabled">無効な選択済の切替スイッチ</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="formSwitchCheckDefault">
<label class="custom-control-label" for="formSwitchCheckDefault">標準の切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="formSwitchCheckChecked" checked>
<label class="custom-control-label" for="formSwitchCheckChecked">選択済の切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="formSwitchCheckDisabled" disabled>
<label class="custom-control-label" for="formSwitchCheckDisabled">無効な切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="formSwitchCheckCheckedDisabled" checked disabled>
<label class="custom-control-label" for="formSwitchCheckCheckedDisabled">無効な選択済の切替スイッチ</label>
</div>
【設定】
- チェックボックスの設定で
.form-check
に.form-switch
を追加
【変更履歴】
- 【v5.0.0-alpha1】
.custom-control.custom-switch
⇒.form-check.form-switch
縦積み(Default(stacked))
デフォルトでは、直接の兄弟であるチェックボックスとラジオボタンはいくつでも垂直方向に積み重ねられ、.form-check
で適切に配置される。
チェックボックス
見本
設定例
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
標準のチェックボックス
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
無効のチェックボックス
</label>
</div>
【設定】
div.form-check
>label.form-check-label
>input.form-check-input[type="checkbox"]
- 無効化したい場合は、
input.form-check-input
にdisabled
属性を入れる
ラジオボタン
見本
設定例
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
標準のラジオボタン
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
標準のラジオボタン2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
無効のラジオボタン
</label>
</div>
【設定】
div.form-check
>label.form-check
>input.form-check-input[type="radio"]
- 無効化したい場合は、
input.form-check-input
にdisabled
属性を入れる
横並び(Inline)v5.0.0-alpha1クラス名変更
.form-check-inline
を任意の .form-check
に追加して、同じ水平方向の行にチェックボックスやラジオボタンをグループ化。
チェックボックス
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">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 class="custom-control-label" for="inlineCheckbox1">1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="inlineCheckbox2" value="option2">
<label class="custom-control-label" for="inlineCheckbox2">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 class="custom-control-label" for="inlineCheckbox3">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
- v4のカスタム・チェックボックスとの変更点:
ラジオボタン
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">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 class="form-check-label" for="inlineRadio3">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 class="custom-control-label" for="inlineRadio1">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 class="custom-control-label" for="inlineRadio2">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 class="custom-control-label" for="inlineRadio3">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
- v4のカスタム・ラジオボタンとの変更点:
ラベル無し(Without labels)v5.0.0-alpha1設定変更
ラベルテキストを持たないチェックボックスとラジオボタンでは、それを囲む要素で .form-check
を省略。支援技術には、何らかの形式のアクセス可能な名前を提供することを忘れないように(例:aria-label
の使用など)。詳細については、フォームの概要のアクセシビリティのセクションに記載。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
チェックボックス<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
ラジオボタン<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="...">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
設定例
チェックボックス<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="CheckboxNoLabel" value="" aria-label="...">
</div>
ラジオボタン<div class="form-check">
<input class="form-check-input position-static" type="radio" 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)
1. 単体ボタンの設定
見本
設定例
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">単独切替ボタン</label>
2. チェック済の場合
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">チェック済</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>
3.無効化の場合 v5.0.0-alpha3設定追加
見本
設定例
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">無効</label>
【設定】
input.btn-check[type="checkbox"]#ID
+label.btn.btn-{themecolor}[for="ID"]
- あらかじめチェック済にしておく場合は、
input.btn-check[type="checkbox"]#ID
に[checked]
を入れる - 無効化したい場合は、
input.btn-check[type="checkbox"]#ID
に[disabled]
を追加
【変更履歴】
- 【v5.0.0-alpha1】
.btn-group-toggle
とdata-toggle="buttons"
(ボタンプラグインの設定)は不要にlabel.btn.btn-{themecolor}
>input[type="checkbox"]
⇒input.btn-check[type="checkbox"]#ID
+label.btn.btn-{themecolor}[for="ID"]
(親<label>
子<input>
要素から兄<input>
弟<label>
要素に)- チェック済:
label.btn.btn-{themecolor}
に.active
は不要に
ラジオ切替ボタン(Radio toggle buttons)
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">選択済</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">ラジオ</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">無効</label>
...
※Bootstrap4.xの設定例 赤背景が変更箇所
<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.btn-check[type="radio"]#ID
+label.btn[for="ID"]
- あらかじめ選択済にしておく場合は、
input.btn-check[type="radio"]#ID
に[checked]
を入れる - 無効化したい場合は、
input.btn-check[type="radio"]#ID
に[disabled]
を追加
【変更履歴】
- 【v5.0.0-alpha1】
.btn-group-toggle
とdata-toggle="buttons"
(ボタンプラグインの設定)は不要にlabel.btn.btn-{themecolor}
>input[type="radio"]
⇒input.btn-check[type="radio"]#ID
+label.btn.btn-{themecolor}[for="ID"]
(親<label>
子<input>
要素から兄<input>
弟<label>
要素に)- 選択済:
label.btn.btn-{themecolor}
に.active
は不要に
- 【v5.0.0-alpha3】
- 無効化の設定が追加
アウトラインスタイル(Outlined styles)v5.0.0-alpha1追加
アウトラインスタイルなど、.btn
の様々なバリエーションをサポート。
見本
設定例
単体ボタン<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">単体の切替</label>
チェック済ボタン<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">チェック済</label>
ボタングループ<div class="btn-group">
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">チェック済のSuccessラジオ</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Dangerラジオ</label>
</div>
【設定】
.btn-{themecolor}
の部分は.btn-outline-{themecolor}
でも使用可能