問題を報告このページを編集

フォーム チェックボックス

ブラウザ間の整合性を保つため、<b-form-checkbox-group> および <b-form-checkbox> は、ブラウザのデフォルトのチェックボックス入力を置き換えるために、Bootstrap のカスタムチェックボックス入力を使用します。これはセマンティックでアクセシブルなマークアップの上に構築されているため、デフォルトのチェックボックス入力の確実な代替となります。

例 1: 単一のチェックボックス

<template>
  <div>
    <b-form-checkbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >
      I accept the terms and use
    </b-form-checkbox>

    <div>State: <strong>{{ status }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 'not_accepted'
      }
    }
  }
</script>

<!-- b-form-checkbox.vue -->

例 2: 複数選択チェックボックス

<template>
  <div>
    <b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Using sub-components:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="flavour-2"
      >
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-multiple.vue -->

options プロパティと <b-form-checkbox> を <b-form-checkbox-group> 内で自由に組み合わせてください。手動で配置された <b-form-checkbox> 入力は、options プロパティによって生成されたチェックボックス入力の下に表示されます。options によって生成された入力の上に表示させるには、名前付きスロット first に配置します。

チェックボックスグループのオプション配列

options は、文字列またはオブジェクトの配列にすることができます。利用可能なフィールド

  • value v-model に設定される選択された値
  • disabled 選択項目を無効にします
  • text 表示テキスト、または html 基本的なインライン HTML を表示します

value は、文字列、数値、または単純なオブジェクトにすることができます。値に複雑な型を使用することは避けてください。

html と text の両方が指定されている場合、html が優先されます。html フィールドでは、基本的な/ネイティブな HTML のみがサポートされています（コンポーネントは機能しません）。すべてのブラウザが <select> の <option> 要素内でインライン HTML (例: <i>、<strong> など) をレンダリングするわけではないことに注意してください。

ユーザーが提供したコンテンツを html フィールドに配置する場合は、注意が必要です。ユーザーが提供した文字列を最初にサニタイズしないと、 XSS 攻撃 に対して脆弱になる可能性があります。

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

配列エントリが文字列の場合、生成された value フィールドと text フィールドの両方で使用されます。

配列内で文字列と オブジェクトを混在させることができます。

内部的には、BootstrapVue は上記の配列を次の配列（オブジェクトの配列）形式に変換します。

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

オブジェクトの配列としてのオプション

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

value が欠落している場合、text が value フィールドと text フィールドの両方として使用されます。html プロパティを使用する場合は、必ず value プロパティを指定してください。

内部的には、BootstrapVue は上記の配列を次の配列（オブジェクトの配列）形式に変換します。

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

オプションフィールド名の変更

フィールドプロパティ名をカスタマイズしたい場合（たとえば、表示 text に name フィールドを使用する場合）、text-field、html-field、value-field、および disabled-field プロパティを、使用したいプロパティ名を含む文字列に設定することで、簡単に変更できます。

<template>
  <div>
    <b-form-checkbox-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-checkbox-group>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [],
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-group-options-fields.vue -->

インラインチェックボックスとスタックチェックボックス

<b-form-checkbox-group> コンポーネントはデフォルトでインラインチェックボックスをレンダリングしますが、<b-form-checkbox> はブロックレベル（スタック）チェックボックスをレンダリングします。

<b-form-checkbox-group> に stacked プロパティを設定して、各フォームコントロールを互いに重ねて配置します。または、<b-form-checkbox-group> 内にない個別のチェックボックスを使用する場合は、<b-form-checkbox> に inline プロパティを設定します。

<template>
  <div>
    <b-form-group
      label="Form-checkbox-group inline checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1a"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Form-checkbox-group stacked checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-2a"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Individual stacked checkboxes (default)"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-3a"
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>

    <b-form-group
      label="Individual inline checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        :aria-describedby="ariaDescribedby"
        name="flavour-4a"
        inline
      >
        {{ option.text }}
      </b-form-checkbox>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-stacked.vue -->

コントロールのサイズ設定

チェックボックスのサイズを制御するには、size プロパティを使用します。デフォルトのサイズは medium です。サポートされているサイズの値は、sm（小）と lg（大）です。

<div>
  <b-form-checkbox size="sm">Small</b-form-checkbox>
  <b-form-checkbox>Default</b-form-checkbox>
  <b-form-checkbox size="lg">Large</b-form-checkbox>
</div>

<!-- form-checkbox-sizes.vue -->

サイズは個々の <b-form-checkbox> コンポーネントに設定するか、<b-form-checkbox-group> のサイズ設定から継承できます。

注: Bootstrap v4.x は、カスタムチェックボックスコントロールのサイズをネイティブにサポートしていません。ただし、BootstrapVue には、カスタムチェックボックスのサイズ設定をサポートするカスタム SCSS/CSS が含まれています。

チェックボックスの値と v-model

デフォルトでは、<b-form-checkbox> の値は、オンの場合は true、オフの場合は false になります。value プロパティと unchecked-value プロパティをそれぞれ指定することで、オン/オフの値をカスタマイズできます。

v-model は、checked プロパティにバインドされます。単一のデータ状態変数にバインドするチェックボックスが複数ある場合は、v-model に配列参照（[]）を必ず指定してください。checked プロパティを直接使用しないでください。

v-model が複数のチェックボックス（つまり、配列参照）にバインドされている場合、unchecked-value は使用されないことに注意してください。オンになっているチェックボックスの値のみが、v-model バインドされた配列で返されます。各チェックボックスの value プロパティには一意の値を指定する必要があります（配列にバインドされている場合、デフォルトの true は機能しません）。

いずれかのラジオを事前にオンにするには、事前に選択したいチェックの値に v-model を設定します。

個別の <b-form-checkbox> コンポーネントを <b-form-checkbox-group> 内に配置する場合、ほとんどのプロパティと v-model は <b-form-checkbox-group> から継承されます。

注: unchecked-value プロパティは、ネイティブの <input> の value 属性には影響しません。これは、ブラウザがフォーム送信にオフになっているボックスを含めないためです。ネイティブの <form> 送信で 2 つの値のいずれか（例: 'yes' または 'no'）が送信されることを保証するには、代わりにラジオ入力を使用してください。これは、Vue がネイティブのチェックボックス入力で抱えているのと同じ制限事項です。

複数のチェックボックスとアクセシビリティ

複数のチェックボックスを一緒にバインドする場合は、グループ内のすべての <b-form-checkbox> に対して個別に、または <b-form-checkbox-group> の name プロパティを介して、name プロパティを同じ値に設定する必要があります。これにより、補助技術のユーザーにチェックボックスが関連していることが通知され、ネイティブブラウザのキーボードナビゲーションが可能になります。

複数のチェックボックスを使用する場合は、チェックボックスのグループ全体にラベルを関連付けるために、チェックボックスを<b-form-group> コンポーネントに配置することをお勧めします。上記の例を参照してください。

ボタンスタイルのチェックボックス

チェックボックスを、個別に、またはグループで、ボタンとして表示するようにオプションでレンダリングできます。

ボタンスタイルのチェックボックスでは、オンの状態の場合、ラベルにクラス .active が自動的に適用されます。

個別のチェックボックスのボタンスタイル

単一のチェックボックスは、プロパティ button を true に設定することで、ボタンの外観でレンダリングできます。

button-variant プロパティを標準の Bootstrap ボタンバリアントのいずれか（サポートされているバリアントについては、<b-button> を参照）に設定して、ボタンバリアントを変更します。デフォルトのバリアントは secondary です。

<template>
  <div>
    <b-form-checkbox v-model="checked1" name="check-button" button>
      Button Checkbox <b>(Checked: {{ checked1 }})</b>
    </b-form-checkbox>
    <b-form-checkbox v-model="checked2" name="check-button" button button-variant="info">
      Button Checkbox <b>(Checked: {{ checked2 }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked1: false,
        checked2: false
      }
    }
  }
</script>

<!-- b-form-checkbox-button.vue -->

inline プロパティは、個々のボタンスタイルのチェックボックスには影響しません。

グループ化されたボタンスタイルのチェックボックス

<b-form-checkbox-group> のプロパティ buttons を設定して、ボタン グループの外観でチェックボックスのグループをレンダリングします。button-variant プロパティを標準の Bootstrap ボタンバリアントのいずれか（サポートされているバリアントについては、<b-button> を参照）に設定して、ボタンバリアントを変更します。デフォルトの button-variant は secondary です。

<template>
  <div>
    <b-form-group
      label="Button-group style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="buttons-1"
        buttons
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Button-group style checkboxes with variant primary and large buttons"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        buttons
        button-variant="primary"
        size="lg"
        name="buttons-2"
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Stacked (vertical) button-group style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        stacked
        buttons
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-button-group.vue -->

スイッチスタイルのチェックボックス

スイッチスタイルは、<b-form-checkbox> および <b-form-checkbox-group> コンポーネントでサポートされています。

注: チェックボックスがボタンモードの場合、スイッチモードは無効になります。

個別のチェックボックススイッチスタイル

単一のチェックボックスは、プロパティswitchをtrueに設定することで、スイッチのような外観でレンダリングできます。

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

<!-- b-form-checkbox-switch.vue -->

グループ化されたスイッチスタイルのチェックボックス

<b-form-checkbox-group>にプロパティswitchesを設定することで、スイッチのような外観でチェックボックスのグループをレンダリングします。

<template>
  <div>
    <b-form-group
      label="Inline switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group
      label="Stacked (vertical) switch style checkboxes"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        switches
        stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Red', value: 'red' },
          { text: 'Green', value: 'green' },
          { text: 'Yellow (disabled)', value: 'yellow', disabled: true },
          { text: 'Blue', value: 'blue' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkboxes-switch-group.vue -->

スイッチのサイズ調整

スイッチのサイズを制御するには、プロパティsizeを使用します。デフォルトのサイズはmediumです。サポートされているサイズの値は、sm（小）とlg（大）です。

<div>
  <b-form-checkbox switch size="sm">Small</b-form-checkbox>
  <b-form-checkbox switch>Default</b-form-checkbox>
  <b-form-checkbox switch size="lg">Large</b-form-checkbox>
</div>

<!-- form-checkbox-switch-sizes.vue -->

サイズは個々の <b-form-checkbox> コンポーネントに設定するか、<b-form-checkbox-group> のサイズ設定から継承できます。

注：Bootstrap v4.xは、カスタムスイッチコントロールのサイズをネイティブでサポートしていません。ただし、BootstrapVueには、カスタムスイッチのサイズ調整をサポートするカスタムSCSS/CSSが含まれています。

カスタムでないチェック入力（プレーン）

<b-form-checkbox-group>または<b-form-checkbox>は、プロパティplainを設定することで、ブラウザネイティブのチェックボックス入力をレンダリングできます。

<template>
  <div>
    <b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        plain
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        plain
        stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
        options: [
          { text: 'Orange', value: 'orange' },
          { text: 'Apple', value: 'apple' },
          { text: 'Pineapple', value: 'pineapple' },
          { text: 'Grape', value: 'grape' }
        ]
      }
    }
  }
</script>

<!-- b-form-checkbox-plain.vue -->

注：plainプロパティは、buttonまたはbuttonsが設定されている場合は効果がありません。

コンテキスト状態

Bootstrapには、ほとんどのフォームコントロールのvalid状態とinvalid状態の検証スタイルが含まれています。

一般的に、特定の種類のフィードバックには特定の状態を使用する必要があります。

  • false（無効な状態を示す）は、必須またはブロックするフィールドがある場合に適しています。ユーザーはフォームを送信するために、このフィールドを適切に入力する必要があります。
  • true（有効な状態を示す）は、フォーム全体でフィールドごとの検証を行い、残りのフィールドを通してユーザーを促したい場合に最適です。
  • nullは、検証状態（有効でも無効でもない）を表示しません。

<b-form-checkbox>にコンテキスト状態アイコンのいずれかを適用するには、stateプロパティをfalse（無効の場合）、true（有効の場合）、またはnull（検証状態なし）に設定します。

注：コンテキスト状態は、ボタンモードではサポートされていません。

コンテキスト状態と検証の例

<template>
  <div>
    <b-form-checkbox-group
      v-model="value"
      :options="options"
      :state="state"
      name="checkbox-validation"
    >
      <b-form-invalid-feedback :state="state">Please select two</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
    </b-form-checkbox-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [
          { text: 'First Check', value: 'first' },
          { text: 'Second Check', value: 'second' },
          { text: 'Third Check', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return this.value.length === 2
      }
    }
  }
</script>

<!-- form-checkbox-validation.vue -->

必須制約

個別の<b-form-checkbox>コンポーネント（<b-form-checkbox-group>内ではない）を使用し、チェックボックスをフォームでrequiredにしたい場合は、required制約が機能するように、各<b-form-checkbox>にnameを指定する必要があります。同じv-modelに紐づけられたすべての<b-form-checkbox>コンポーネントは、同じnameを持つ必要があります。

nameは、支援技術（スクリーンリーダーやキーボードのみを使用するユーザーなど）が、どのチェックボックスが同じフォーム変数に属しているかを知るために必要です（nameは、ネイティブブラウザのキーボードナビゲーションも自動的に有効にします）。したがって、requiredは、nameが設定されている場合にのみ機能します。<b-form-checkbox-group>は、グループに指定されていない場合、一意の入力名を自動的に生成します。

オートフォーカス

<b-form-checkbox>にautofocusプロパティが設定されている場合、入力がドキュメントに挿入（つまり、マウント）されたとき、またはVueの<keep-alive>コンポーネント内で再アクティブ化されたときに、入力が自動的にフォーカスされます。このプロパティは、入力にautofocus属性を設定したり、入力がいつ表示されるかを判別したりすることはできません。

不確定（3状態）のサポート

通常、チェックボックス入力は、チェックまたは未チェックの2つの状態しか持つことができません。任意の値を持つことはできますが、フォーム送信でその値を送信する（チェック）か、送信しない（未チェック）かのどちらかです（ただし、BootstrapVueでは、単一のチェックボックスの未チェック状態の値を許可しています）。

視覚的には、チェックボックスは実際には3つの状態（チェック、未チェック、または不確定）にすることができます。

不確定状態は、視覚のみの状態です。チェックボックスは、値としてはチェックまたは未チェックのままです。つまり、視覚的な不確定状態は、チェックボックスの実際の値をマスクするため、UIでより理にかなっている必要があります。

<b-form-checkbox>は、indeterminateプロパティ（デフォルトはfalse）を介して、この視覚的な不確定状態の設定をサポートします。チェックボックスをクリックすると、不確定状態がクリアされます。indeterminateプロパティは、.sync修飾子を使用してindeterminateプロパティをv-bindingすることで、チェックボックスの状態に同期させることができます。

注：不確定スタイルは、ボタンモードまたはスイッチモードではサポートされておらず、<b-form-checkbox-group>（複数のチェックボックス）でもサポートされていません。

単一の不確定チェックボックス

<template>
  <div>
    <b-form-checkbox v-model="checked" :indeterminate.sync="indeterminate">
      Click me to see what happens
    </b-form-checkbox>

    <div class="mt-3">
      Checked: <strong>{{ checked }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>

    <b-button @click="toggleIndeterminate">Toggle Indeterminate State</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: true,
        indeterminate: true
      }
    },
    methods: {
      toggleIndeterminate() {
        this.indeterminate = !this.indeterminate
      }
    }
  }
</script>

<!-- b-form-checkbox-indeterminate.vue -->

不確定チェックボックスのユースケースの例

<template>
  <div>
    <b-form-group>
      <template #label>
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <template v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          id="flavors"
          v-model="selected"
          :options="flavours"
          :aria-describedby="ariaDescribedby"
          name="flavors"
          class="ml-4"
          aria-label="Individual flavours"
          stacked
        ></b-form-checkbox-group>
      </template>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        flavours: ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry'],
        selected: [],
        allSelected: false,
        indeterminate: false
      }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.flavours.slice() : []
      }
    },
    watch: {
      selected(newValue, oldValue) {
        // Handle changes in individual flavour checkboxes
        if (newValue.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newValue.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

<!-- b-form-checkbox-indeterminate-multiple.vue -->

注：不確定は、buttonモード、または複数のチェックボックスモードではサポートされていません。また、プレーンチェックボックス（つまり、プロパティplainを使用）は、Windows/Linux/Mac/Androidでは不確定状態をサポートしていますが、iOSではサポートしていません。

不確定状態とアクセシビリティ

すべてのスクリーンリーダーが、スクリーンリーダーユーザーに不確定状態を伝えるわけではありません。したがって、不確定状態がアプリケーションで特別なコンテキスト上の意味を持つ場合は、ユーザーに何らかの形式のテキストフィードバック（.sr-onlyクラスを介してなど）を提供することをお勧めします。

コンポーネントリファレンス

<b-form-checkbox-group>

ソースを表示

コンポーネントのエイリアス

<b-form-checkbox-group>は、次のエイリアスを使用して使用することもできます。

  • <b-checkbox-group>
  • <b-check-group>

注：コンポーネントのエイリアスは、BootstrapVueをすべてインポートする場合、またはコンポーネントグループプラグインを使用する場合にのみ使用できます。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに構成可能です。

プロパティ
(昇順でソートするにはクリックしてください)
型
(昇順でソートするにはクリックしてください)
デフォルト
説明
aria-invalid
BooleanまたはStringfalseラッパー要素に「aria-invalid」属性値を設定します。指定しない場合、「state」プロパティが属性を制御します。
autofocus
Booleanfalse`true`に設定すると、マウントされたとき、またはkeep-alive内で再アクティブ化されたときに、コントロールに自動的にフォーカスを試みます。コントロールに`autofocus`属性は設定しません。
button-variant
Stringボタン スタイルのチェックボックスに適用する Bootstrap コンテキスト カラー テーマのバリアントを指定します。
buttons
Booleanfalse設定すると、このグループのチェックボックスがボタンスタイルでレンダリングされます。
checked
v-model 		Array[]グループ内でチェックされているチェックボックスの現在の値。複数のチェックボックスがある場合は、配列である必要があります。
disabled
Booleanfalse`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
disabled-field
String'disabled'`options`配列で無効状態に使用する必要があるフィールド名
form
Stringフォームコントロールが属するフォームのID。コントロールに`form`属性を設定します。
html-field
注意して使用してください 		String'html'テキストフィールドの代わりにhtmlラベルに使用する必要がある`options`配列のフィールド名
id
Stringレンダリングされたコンテンツに`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
name
Stringフォームコントロールに`name`属性の値を設定します。
options
ArrayまたはObject[]コンポーネントにレンダリングする項目の配列
plain
Booleanfalseフォームコントロールを、カスタムスタイルモードではなくプレーンモードでレンダリングします。
required
Booleanfalseフォームコントロールに`required`属性を追加します。
size
Stringコンポーネントの外観のサイズを設定します。「sm」、「md」（デフォルト）、または「lg」
stacked
Booleanfalse設定すると、チェックボックスグループがスタックモードでレンダリングされます。
state
Booleannullコンポーネントの検証状態の外観を制御します。`true`は有効、`false`は無効、`null`は検証状態なしです。
switches
Booleanfalse設定すると、グループ内のチェックボックスがスイッチスタイルでレンダリングされます。
text-field
String'text'`options`配列でテキストラベルに使用する必要があるフィールド名
validated
Booleanfalse設定すると、Bootstrapクラス「was-validated」がグループラッパーに追加されます。
value-field
String'value'`options`配列で値に使用する必要があるフィールド名

注意：HTML文字列をサポートするプロパティ（*-html）は、生のユーザー提供値を渡すと、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります。

v-model

プロパティ
イベント
checkedinput

スロット

名前
説明
default フォームチェックボックスグループに配置するコンテンツ (フォームチェックボックス)
first options プロパティから生成されたチェックボックスの前に表示されるように、b-form-checks を配置するスロット

イベント

イベント
引数
説明
change
  1. checked - チェックボックスの値。値は配列になります
ユーザーの操作により、選択された値が変更されたときに発生します
input
  1. checked - チェックボックスの値。値は配列になります
チェックされた値が変更されたときに発生します

<b-form-checkbox>

ソースを表示

コンポーネントのエイリアス

<b-form-checkbox> は以下のエイリアスでも使用できます。

  • <b-checkbox>
  • <b-check>

注：コンポーネントのエイリアスは、BootstrapVueをすべてインポートする場合、またはコンポーネントグループプラグインを使用する場合にのみ使用できます。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに構成可能です。

プロパティ
(昇順でソートするにはクリックしてください)
型
(昇順でソートするにはクリックしてください)
デフォルト
説明
aria-label
Stringレンダリングされた要素の `aria-label` 属性の値を設定します
aria-labelledby
Stringこのコンポーネントのラベルを提供する要素の ID。`aria-labelledby` 属性の値として使用されます
autofocus
Booleanfalse`true`に設定すると、マウントされたとき、またはkeep-alive内で再アクティブ化されたときに、コントロールに自動的にフォーカスを試みます。コントロールに`autofocus`属性は設定しません。
button
Booleanfalse設定すると、ボタンの外観でチェックボックスがレンダリングされます
button-variant
String'button'モードの場合、Bootstrapのテーマカラーのいずれかが適用されます
checked
v-model 		Anynullチェックボックスの現在の値。同じv-modelにバインドされた複数のチェックボックスがある場合は、配列である必要があります
disabled
Booleanfalse`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります。
form
Stringフォームコントロールが属するフォームのID。コントロールに`form`属性を設定します。
id
Stringレンダリングされたコンテンツに`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
indeterminate
Booleanfalseチェックボックスを不確定な状態でレンダリングします。.sync修飾子で同期可能です
inline
Booleanfalse設定すると、チェックボックスは100％幅のブロックではなく、インライン要素としてレンダリングされます
name
Stringフォームコントロールに`name`属性の値を設定します。
plain
Booleanfalseフォームコントロールを、カスタムスタイルモードではなくプレーンモードでレンダリングします。
required
Booleanfalseフォームコントロールに`required`属性を追加します。
size
Stringコンポーネントの外観のサイズを設定します。「sm」、「md」（デフォルト）、または「lg」
state
Booleannullコンポーネントの検証状態の外観を制御します。`true`は有効、`false`は無効、`null`は検証状態なしです。
switch
Booleanfalse設定すると、スイッチの外観でチェックボックスがレンダリングされます
unchecked-value
Anyfalseこのチェックボックスがオフの場合に返される値。同じv-model配列にバインドされた複数のチェックボックスには適用されないことに注意してください
value
Anytrueこのチェックボックスがオンの場合に返される値

v-model

プロパティ
イベント
checkedinput

スロット

名前
説明
default フォームチェックボックスに配置するコンテンツ

イベント

イベント
引数
説明
change
  1. checked - チェックボックスの値。複数のチェックボックスにバインドされている場合、値は配列になります
ユーザーの操作により、選択された値が変更されたときに発生します
input
  1. checked - チェックボックスの値。複数のチェックボックスにバインドされている場合、値は配列になります
選択された値が変更されたときに発生します

個々のコンポーネントのインポート

次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます

コンポーネント
名前付きエクスポート
インポートパス
<b-form-checkbox-group>BFormCheckboxGroupbootstrap-vue
<b-form-checkbox>BFormCheckboxbootstrap-vue

例

import { BFormCheckboxGroup } from 'bootstrap-vue'
Vue.component('b-form-checkbox-group', BFormCheckboxGroup)

Vue.jsプラグインとしてのインポート

このプラグインには、上記の個々のコンポーネントがすべて含まれていますプラグインには、コンポーネントのエイリアスも含まれます。

名前付きエクスポート
インポートパス
FormCheckboxPluginbootstrap-vue

例

import { FormCheckboxPlugin } from 'bootstrap-vue'
Vue.use(FormCheckboxPlugin)