チェックとラジオ

Approach

HTML 要素のレイアウトと動作を改善するために、ブラウザのデフォルトのチェックボックスとラジオは FormCheck コンポーネントで置き換えられます。多くのカスタマイズとブラウザ間の一貫性を提供します。

チェックボックスはリストから 1 つまたは複数のオプションを選択するためのもので、ラジオは多数のオプションから 1 つを選択するためのものです。

構造的に、 FormCheckInputと FormCheckLabel は、 FormCheckLabel内の FormCheckInputとは対照的に兄弟要素です。

FormCheckInputと FormCheckLabel を関連付けるには id 属性と for 属性を指定する必要があるため、これは少し冗長になります。

checked 属性や disabled 属性など、すべての FormCheckInput コンポーネントに兄弟セレクター（~）を使用します。

.form-check-labelクラスと組み合わせると、FormCheckInput の状態に基づいて各アイテムのテキストのスタイルを簡単に設定できます。

チェックでは、チェック済みまたは不確定の状態を示します。

Checks

Default checkbox

Checked checkbox

Static checked checkbox

Checkbox 1: false
Checkbox 2: true

vue

<template>
 <BFormCheck>
  <BFormCheckInput v-model="checkbox1" />
  <BFormCheckLabel>Default checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput v-model="checkbox2" />
  <BFormCheckLabel>Checked checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput checked />
  <BFormCheckLabel>Static checked checkbox</BFormCheckLabel>
 </BFormCheck>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Checkbox 1
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox1 }}
  </b-dd>
  <b-dt col="sm-3">
   Checkbox 2
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox2 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const checkbox1 = ref(false);
const checkbox2 = ref(true);
</script>

Custom value Model Binding

Default checkbox

Checked checkbox

Checkbox 1: ng
Checkbox 2: ok

vue

<template>
 <BFormCheck>
  <BFormCheckInput
   v-model="checkbox1"
   true-value="ok"
   false-value="ng"
  />
  <BFormCheckLabel>Default checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   v-model="checkbox2"
   true-value="ok"
   false-value="ng"
  />
  <BFormCheckLabel>Checked checkbox</BFormCheckLabel>
 </BFormCheck>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Checkbox 1
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox1 }}
  </b-dd>
  <b-dt col="sm-3">
   Checkbox 2
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox2 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const checkbox1 = ref('ng');
const checkbox2 = ref('ok');
</script>

Indeterminate

チェックボックスは、indeterminate 属性を利用することができます。

Indeterminate checkbox

vue

<template>
 <BFormCheck>
  <BFormCheckInput indeterminate />
  <BFormCheckLabel>
   Indeterminate checkbox
  </BFormCheckLabel>
 </BFormCheck>
</template>

Disabled

disabled 属性を追加すると、関連付けられた FormCheckLabel は、入力の状態を示すように自動的にスタイル設定されます。下記の例を参考にしてください。

Disabled checkbox

Disabled checked checkbox

vue

<template>
 <BFormCheck>
  <BFormCheckInput disabled />
  <BFormCheckLabel>Disabled checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   checked
   disabled
  />
  <BFormCheckLabel>Disabled checked checkbox</BFormCheckLabel>
 </BFormCheck>
</template>

Radios

Default radio

Default checked radio

Selected Value: two

vue

<template>
 <BFormCheck>
  <BFormCheckInput
   v-model="radioValue"
   value="one"
   type="radio"
  />
  <BFormCheckLabel>Default radio</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   v-model="radioValue"
   value="two"
   type="radio"
  />
  <BFormCheckLabel>Default checked radio</BFormCheckLabel>
 </BFormCheck>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Selected Value
  </b-dt>
  <b-dd col="sm-9">
   {{ radioValue }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const radioValue = ref('two');
</script>

Disabled

disabled 属性を追加すると、関連付けられた FormCheckLabel は、入力の状態を示すように自動的にスタイル設定されます。下記の例を参考にしてください。

Disabled radio

Disabled checked radio

vue

<template>
 <BFormCheck>
  <BFormCheckInput
   type="radio"
   name="flexRadioDisabled"
   disabled
  />
  <BFormCheckLabel>Disabled radio</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   type="radio"
   name="flexRadioDisabled"
   checked
   disabled
  />
  <BFormCheckLabel>Disabled checked radio</BFormCheckLabel>
 </BFormCheck>
</template>

Switches

スイッチにはカスタムチェックボックスのマークアップがあります。switch 属性を使用してトグルスイッチをレンダリングします。スイッチは、disabled 属性もサポートします。

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

Checkbox 1: false
Checkbox 2: true
Checkbox 3: false

vue

<template>
 <BFormCheck switch>
  <BFormCheckInput v-model="checkbox1" />
  <BFormCheckLabel>Default switch checkbox input</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck switch>
  <BFormCheckInput v-model="checkbox2" />
  <BFormCheckLabel>Checked switch checkbox input</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck switch>
  <BFormCheckInput
   v-model="checkbox3"
   :disabled="checkbox1 != checkbox2"
  />
  <BFormCheckLabel>Disabled switch checkbox input</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck switch>
  <BFormCheckInput
   checked
   disabled
  />
  <BFormCheckLabel>Disabled checked switch checkbox input</BFormCheckLabel>
 </BFormCheck>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Checkbox 1
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox1 }}
  </b-dd>
  <b-dt col="sm-3">
   Checkbox 2
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox2 }}
  </b-dd>
  <b-dt col="sm-3">
   Checkbox 3
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox3 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const checkbox1 = ref(false);
const checkbox2 = ref(true);
const checkbox3 = ref(false);
</script>

Default (stacked)

デフォルトでは、チェックボックスとラジオは、任意の数だけ縦に積み上げられ、適切な間隔で FormCheck が配置されます。

Default checkbox

Disabled checkbox

vue

<template>
 <BFormCheck>
  <BFormCheckInput />
  <BFormCheckLabel>Default checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput disabled />
  <BFormCheckLabel>Disabled checkbox</BFormCheckLabel>
 </BFormCheck>
</template>

Default radio

Second default radio

Disabled radio

vue

<template>
 <BFormCheck>
  <BFormCheckInput
   type="radio"
   name="exampleRadios"
   value="option1"
   checked
  />
  <BFormCheckLabel>Default radio</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   type="radio"
   name="exampleRadios"
   value="option2"
  />
  <BFormLabel>Second default radio</BFormLabel>
 </BFormCheck>
 <BFormCheck>
  <BFormCheckInput
   type="radio"
   name="exampleRadios"
   value="option3"
   disabled
  />
  <BFormCheckLabel>Disabled radio</BFormCheckLabel>
 </BFormCheck>
</template>

Inline

任意の FormCheck に inline 属性を追加することで、同じ水平行にあるチェックボックスやラジオをグループ化することができます。

vue

<template>
 <BFormCheck inline>
  <BFormCheckInput value="option1" />
  <BFormCheckLabel>1</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck inline>
  <BFormCheckInput value="option2" />
  <BFormCheckLabel>2</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck inline>
  <BFormCheckInput
   value="option3"
   disabled
  />
  <BFormCheckLabel>3 (disabled)</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck inline>
  <BFormCheckInput
   type="radio"
   name="inlineRadioOptions"
   value="option1"
  />
  <BFormCheckLabel>1</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck inline>
  <BFormCheckInput
   type="radio"
   name="inlineRadioOptions"
   value="option2"
  />
  <BFormCheckLabel>2</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck inline>
  <BFormCheckInput
   type="radio"
   name="inlineRadioOptions"
   value="option3"
   disabled
  />
  <BFormCheckLabel>3 (disabled)</BFormCheckLabel>
 </BFormCheck>
</template>

Reverse

反転させるには reverse クラスを追加します。

Reverse checkbox

Disabled reverse checkbox

Reverse switch checkbox input

vue

<template>
 <BFormCheck reverse>
  <BFormCheckInput />
  <BFormCheckLabel>Reverse checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck reverse>
  <BFormCheckInput
   disabled
  />
  <BFormCheckLabel>Disabled reverse checkbox</BFormCheckLabel>
 </BFormCheck>
 <BFormCheck
  switch
  reverse
 >
  <BFormCheckInput value="option3" />
  <BFormCheckLabel>Reverse switch checkbox input</BFormCheckLabel>
 </BFormCheck>
</template>

Without labels

ラベルテキストがない場合は FormCheck を省略します。

支援技術（たとえば、aria-labelの使用）には、何らかの形式のラベルを提供することを忘れないでください。

vue

<template>
 <b-div>
  <BFormCheckInput
   aria-label="..."
  />
 </b-div>

 <b-div>
  <BFormCheckInput
   type="radio"
   name="radioNoLabel"
   aria-label="..."
  />
 </b-div>
</template>

Toggle buttons

ボタンのようなチェックボックスやラジオボタンを作成するには、FormCheckLabel コンポーネントに .form-check-label ではなく .btn, スタイルを使用します。

これらのトグルボタンは必要に応じて[button group](/components/button-group) でグループ化することができます。

Checkbox toggle buttons

Single toggle 1 Single toggle 2 Checked Disabled

Toggle 1: false
Toggle 2: true

vue

<template>
 <CheckboxToggleButton
  v-model="checkbox1"
  color="primary"
 >
  Single toggle 1
 </CheckboxToggleButton>
 <CheckboxToggleButton
  v-model="checkbox2"
  color="primary"
 >
  Single toggle 2
 </CheckboxToggleButton>
 <CheckboxToggleButton
  color="primary"
  checked
 >
  Checked
 </CheckboxToggleButton>
 <CheckboxToggleButton
  color="primary"
  disabled
 >
  Disabled
 </CheckboxToggleButton>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Toggle 1
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox1 }}
  </b-dd>
  <b-dt col="sm-3">
   Toggle 2
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox2 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const checkbox1 = ref(false);
const checkbox2 = ref(true);
</script>

Single toggle 1 Single toggle 2 Disabled

Toggle 1: false
Toggle 2: true

vue

<template>
 <CheckboxToggleButton v-model="checkbox1">
  Single toggle 1
 </CheckboxToggleButton>
 <CheckboxToggleButton v-model="checkbox2">
  Single toggle 2
 </CheckboxToggleButton>
 <CheckboxToggleButton
  disabled
 >
  Disabled
 </CheckboxToggleButton>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Toggle 1
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox1 }}
  </b-dd>
  <b-dt col="sm-3">
   Toggle 2
  </b-dt>
  <b-dd col="sm-9">
   {{ checkbox2 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const checkbox1 = ref(false);
const checkbox2 = ref(true);
</script>

Radio toggle buttons

Checked Radio Disabled Radio

Toggle 1: one

vue

<template>
 <RadioToggleButton
  v-model="radio1"
  value="one"
  color="secondary"
  checked
 >
  Checked
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="two"
  color="secondary"
 >
  Radio
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="three"
  color="secondary"
  disabled
 >
  Disabled
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="four"
  color="secondary"
 >
  Radio
 </RadioToggleButton>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Toggle 1
  </b-dt>
  <b-dd col="sm-9">
   {{ radio1 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const radio1 = ref('one');
</script>

Checked Radio Disabled Radio

Toggle 1: one

vue

<template>
 <RadioToggleButton
  v-model="radio1"
  value="one"
  checked
 >
  Checked
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="two"
 >
  Radio
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="three"
  disabled
 >
  Disabled
 </RadioToggleButton>
 <RadioToggleButton
  v-model="radio1"
  value="four"
 >
  Radio
 </RadioToggleButton>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Toggle 1
  </b-dt>
  <b-dd col="sm-9">
   {{ radio1 }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const radio1 = ref('one');
</script>

Outlined styles

.btn のさまざまなバリエーションがサポートされています。

Single toggle Checked Checked success radio Danger radio

vue

<template>
 <CheckboxToggleButton color="outline-primary">
  Single toggle
 </CheckboxToggleButton>
 <CheckboxToggleButton
  color="outline-secondary"
  checked
 >
  Checked
 </CheckboxToggleButton>
 <RadioToggleButton
  name="options-outlined"
  color="outline-success"
  checked
 >
  Checked success radio
 </RadioToggleButton>
 <RadioToggleButton
  name="options-outlined"
  color="outline-danger"
 >
  Danger radio
 </RadioToggleButton>
</template>

Bootstrap

チェックとラジオ

Approach

Checks

Custom value Model Binding

Indeterminate

Disabled

Radios

Disabled

Switches

Default (stacked)

Inline

Reverse

Without labels

Toggle buttons

Checkbox toggle buttons

Radio toggle buttons

Outlined styles

See Also

フォーム

フォーム

セレクト

レンジ

インプットグループ

フローティングラベル

レイアウト

バリデーション

ViewState