表单复选框(Form Checkbox Inputs)

为了实现跨浏览器的一致性，<b-form-checkbox-group> 和 <b-form-checkbox> 使用 Bootstrap 的自定义复选框输入来替换浏览器默认复选框输入。它建立在语义和可访问标记之上，因此可以替代默认的复选框输入。

示例1： 单选框

I accept the terms and use

State: not_accepted

<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>

示例2： 多选复选框

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

    <b-form-group label="Using sub-components:">
      <b-form-checkbox-group id="checkbox-group-2" v-model="selected" 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>

随意混合和匹配 options【选项】属性和 <b-form-checkbox-group> 中的 <b-form-checkbox> 。手动放置的 <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 字段中，因为如果不先 sanitize【清理】用户提供的字符串，这可能会使您容易受到 XSS attacks【XSS攻击】。

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

If an array entry is a string, it will be used for both the generated value and text fields.

You can mix using strings and objects in the array.

Internally, BootstrapVue will convert the above array to the following array (the array of objects) format:

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会将上面的数组转换为下面的数组（array of objects【对象数组】）格式：

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 }
]

更改选项字段名称

如果要自定义字段属性名称（例如，使用 name 字段显示 text ），可以通过将 text-field ，html-field ，value-field ，和 disabled-field 属性设置为包含您想要使用的属性名的字符串来轻松地更改它们:

Option A

Option B

Option C

Option D

Selected: []

<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> 组件呈现嵌入式复选框，而 <b-form-checkbox> 呈现块级（堆叠）复选框。

设置 stacked【叠放】 <b-form-checkbox-group> 上的属性，以将每个表单控件彼此放置在一起；或者，如果使用不在 <b-form-checkbox-group> 内的单个复选框，则将 inline【内联】属性设置在 <b-form-checkbox> 。

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

    <b-form-group label="Form-checkbox-group stacked checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        name="flavour-2a"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

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

    <b-form-group label="Individual inline checkboxes">
      <b-form-checkbox
        v-for="option in options"
        v-model="selected"
        :key="option.value"
        :value="option.value"
        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>

控制尺寸

使用 size 属性控制复选框的大小。默认大小为中。支持的大小值为 sm（小）和 lg（大）。

Small

Default

Large

<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>

可以在各个 <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> 提交中提交两个值之一（例如，“'yes'”或“'no'”），请改用单选输入。这与 Vue has with native checkbox inputs【Vue对本机复选框输入】的限制相同。

多个复选框和可访问性

将多个复选框绑定在一起时，必须将组中所有 <b-form-checkbox> 的 name 属性设置为相同的值，或者通过 <b-form-checkbox-group> 的 name 属性设置。这将通知辅助技术用户复选框相关，并启用本机浏览器键盘导航。

每当使用多个复选框时，建议将复选框放置在 <b-form-group> 组件中，以将标签与整个复选框组相关联。请参阅上面的示例。

按钮样式复选框

您可以选择使复选框单独或成组显示为按钮。

按钮样式复选框处于选中状态时，将自动将 .active 类应用于标签。

单个复选框按钮样式

通过将 button 属性设置为 true ，可以使用按钮外观呈现单个复选框

通过将 button-variant 属性设置为标准Bootstrap按钮变量之一来更改按钮变量（有关受支持的变量，请参见 <b-button> ）。默认变量是 secondary【次要】变量。

Button Checkbox (Checked: false)

<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>

inline 【内嵌】属性对单个按钮样式的复选框无效。

分组按钮样式复选框

通过在 <b-form-checkbox-group> 上设置 buttons 属性，以按钮组的外观呈现复选框组。通过将 button-variant 属性设置为标准 Bootstrap 按钮变量之一来更改按钮变量（有关受支持的变量，请参见 <b-button> ）。默认的 button-variant 为 secondary【次要】按钮。

<template>
  <div>
    <b-form-group label="Button-group style checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        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">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        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">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        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> 和 <b-form-checkbox-group> 组件支持开关样式。

注意： 如果复选框处于 button mode【按钮模式】，则切换模式将无效。

单独的复选框开关样式

通过将 switch【开关】属性设置为 true ，可以使用开关外观呈现单个复选框。

Switch Checkbox (Checked: false)

<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-group> 上设置 switches【开关】属性，以开关的外观呈现复选框组。

<template>
  <div>
    <b-form-group label="Inline switch style checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        switches
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Stacked (vertical) switch style checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        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>

开关尺寸

使用 size 属性控制开关的大小。默认大小为中。支持的大小值为 sm（小）和 lg（大）。

Small

Default

Large

<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>

可以在各个 <b-form-checkbox> 组件上设置大小，也可以继承 <b-form-checkbox-group> 的大小设置。

注意： Bootstrap v4.x 本身不支持自定义开关控件的大小。但是，BootstrapVue 包含自定义 SCSS / CSS，它增加了对自定义开关的大小支持。

非定制检查输入（纯文本）

您可以通过设置 plain 属性使 <b-form-checkbox-group> 或 <b-form-checkbox> 呈现浏览器本机复选框输入。

<template>
  <div>
    <b-form-group label="Plain inline checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        plain
      ></b-form-checkbox-group>
    </b-form-group>

    <b-form-group label="Plain stacked checkboxes">
      <b-form-checkbox-group
        v-model="selected"
        :options="options"
        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>

注意： 当设置一个 button 或多个 button 时，plain 属性无效。

上下文状态

Bootstrap 包括大多数表单控件上 valid【有效】和 invalid【无效】状态的验证样式。

一般来说，您需要针对特定类型的反馈使用特定状态：

false（表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。
true（表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。
null 不显示验证状态（既不有效也不无效）

要在 <b-form-checkbox> 上应用上下文状态图标之一，请将 state 属性设置为 false（对于无效），true（对于有效）或 null（无验证状态）。

注意： 在按钮模式下，不支持上下文状态。

上下文状态和验证示例

First Check

Second Check

Third Check

Please select two

Thank you

<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>

所需约束

当使用单独的 <b-form-checkbox> 组件(不在 <b-form-checkbox-group>中)，并且希望表单中 required【需要】复选框时，必须在每个 <b-form-checkbox> 上提供一个 name【名称】，以便所需的约束能够工作。所有绑定到相同 v-model 的 <b-form-checkbox> 组件必须具有相同的 name【名称】。

所需的 name【名称】是为了辅助技术(如屏幕阅读器和键盘只有用户)知道该复选框属于同一形式变量(这个名字会自动使本机浏览器键盘导航),因此 required【需要】将只工作如果 name【名称】是组。<b-form-checkbox-group> 将自动生成一个唯一的输入名称如果没有提供。

自动聚焦

当将 autofocus【自动对焦】属性设置为 <b-form-checkbox> 时，输入将在插入（即 mounted【安装】）到文档中时自动对焦，或者在Vue <keep-alive> 组件内部重新激活。请注意，此道具不会在输入上设置 autofocus【自动对焦】属性，也无法告诉输入何时可见。

不确定（三态）支持

通常，复选框输入只能具有两种状态：checked【选中】或 unchecked【未选中】。它们可以具有任何值，但是他们可以通过表单提交来提交（checked【选中】）或不提交（unchecked【取消选中】）该值（尽管 BootstrapVue 在单个复选框上允许 unchecked【未选中】状态的值）

从视觉上看，复选框实际上有三种状态：checked【选中】、unchecked【未选中】或 indeterminate【不确定】。

indeterminate【不确定】状态 仅是可见 的。该复选框仍被选中或未选中为值。这意味着视觉上不确定的状态掩盖了复选框的真实用处，从而使UI更有意义！

<b-form-checkbox> 支持通过 indeterminate【不确定】属性设置此视觉不确定状态（默认为 false ）。单击复选框将清除其不确定状态。通过使用 .sync 修饰符 v-binding【绑定】 indeterminate【不确定】的属性，可以将 indeterminate【不确定】的属性同步到复选框的状态。

注意： 按钮或切换模式不支持不确定的样式，<b-form-checkbox-group>（多个复选框）也不支持不确定的样式。

单个不确定复选框：

Click me to see what happens

Checked: true
Indeterminate: true

<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>

不确定的复选框 use-case【使用案例】示例：

<template>
  <div>
    <b-form-group>
      <template v-slot: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>

      <b-form-checkbox-group
        id="flavors"
        v-model="selected"
        :options="flavours"
        name="flavors"
        class="ml-4"
        aria-label="Individual flavours"
        stacked
      ></b-form-checkbox-group>
    </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(newVal, oldVal) {
        // Handle changes in individual flavour checkboxes
        if (newVal.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newVal.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

注意： button【按钮】模式或多个复选框模式均不支持不确定。还请注意，普通复选框（即使用 plain【普通】属性）在Windows / Linux / Mac / Android上也支持不确定状态，但在 iOS 上不支持。

不确定的状态和可访问性

并非所有屏幕阅读器都会将不确定状态传达给屏幕阅读器用户。因此，如果不确定状态在您的应用程序中具有特殊的上下文含义，则建议向用户提供某种形式的文本反馈（可能通过 .sr-only 类）。

组件引用

`<b-form-checkbox-group>`

查看源代码

<b-form-checkbox-group> 组件别名
<b-form-checkbox-group> 属性
<b-form-checkbox-group> v-model
<b-form-checkbox-group> 插槽
<b-form-checkbox-group> 事件

组件别名

<b-form-checkbox-group> 也可以通过以下别名使用：

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

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`id`	String		用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`name`	String		设置表单控件上“name”属性的值
`disabled`	Boolean		设置为“true”时，禁用组件的功能并将其置于禁用状态
`required`	Boolean	`false`	将'required'【需要】属性添加到表单控件
`form`	String		表单控件所属的表单的 ID 。在控件上设置“form”属性
`autofocus`	Boolean	`false`	设置为“ true”时，尝试在安装控件时自动将其调焦，或者在保持活动状态时将其重新激活。未在控件上设置“autofocus”属性
`validated`	Boolean	`false`	设置后，将 Bootstrap 类“was-validated”添加到组包装器中
`aria-invalid`	Boolean or String	`false`	在包装器元素上设置“ aria-invalid”属性值。如果未提供，“state”属性将控制属性
`stacked`	Boolean	`false`	设置后，以堆叠模式呈现复选框组
`plain`	Boolean	`false`	以普通模式而不是自定义样式模式呈现表单控件
`buttons`	Boolean	`false`	设置后，使用按钮样式呈现此组中的复选框
`button-variant`	String	`'secondary'`	指定适用于按钮样式复选框的 Bootstrap 上下文颜色主题变量
`options`	Array or Object	`[]`	要在组件中渲染的项目数组
`value-field`	String	`'value'`	'options'【选项】数组中的字段名称，该字段名称应用于该值
`text-field`	String	`'text'`	'options'【选项】数组中应用于文本标签的字段名称
`html-field`	String	`'html'`	'options'【选项】数组中的字段名称，应该用于 html 标签而不是文本字段。请谨慎使用。
`disabled-field`	String	`'disabled'`	'options'【选项】数组中应用于禁用状态的字段名称
`size`	String		设置组件外观的大小。'sm'，'md'（默认）或'lg'
`state`	Boolean		控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态
`switches`	Boolean	`false`	设置后，使用开关样式渲染组中的复选框
`checked` v-model	Array		组中选中的复选框的当前值。有多个复选框时必须为数组

v-model

属性	事件
`checked`	`input`

插槽

插槽名称	描述
`first`	用于放置 b-form-check 的插槽，以便它们出现在由 options【选项】属性生成的检查之前

事件

事件	参数	描述
`input`	`checked` - 复选框的值。值将是一个数组。	更改检查值时发出
`change`	`checked` - 复选框的值。值将是一个数组。	由于用户交互而更改选定值时发出

`<b-form-checkbox>`

查看源代码

<b-form-checkbox> 组件别名
<b-form-checkbox> 属性
<b-form-checkbox> v-model
<b-form-checkbox> 事件

组件别名

<b-form-checkbox> 也可以通过以下别名使用：

<b-checkbox>
<b-check>

注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。

属性

属性 (Click to sort Ascending)	类型	默认值	描述
`value`	Any	`true`	选中此复选框时返回的值
`checked` v-model	Any		复选框的当前值。当有多个复选框绑定到同一 v-model 时，必须是一个数组
`inline`	Boolean	`false`	设置后，将复选框呈现为内联元素而不是宽度为100％的块
`plain`	Boolean	`false`	以普通模式而不是自定义样式模式呈现表单控件
`button`	Boolean	`false`	设置后，呈现带有按钮外观的复选框
`button-variant`	String		在“button”模式下适用于 Bootstrap 的主题颜色
`aria-label`	String		设置渲染元素上“aria-label”属性的值
`aria-labelledby`	String		提供此组件标签的元素的ID。用作“aria-labelledby”属性的值
`id`	String		用于在呈现的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
`name`	String		设置表单控件上“name”属性的值
`disabled`	Boolean		设置为“true”时，禁用组件的功能并将其置于禁用状态
`required`	Boolean	`false`	将“required”属性添加到表单控件
`form`	String		表单控件所属的表单的ID。在控件上设置“form”属性
`autofocus`	Boolean	`false`	设置为“ true”时，尝试在安装控件时自动将其调焦，或者在保持活动状态时将其重新激活。未在控件上设置“autofocus”属性
`size`	String		设置组件外观的大小。'sm'，'md'（默认）或'lg'
`state`	Boolean		控制组件的验证状态外观。 “ true”表示有效，“ false”表示无效”，“ null”表示无验证状态
`unchecked-value`	Any	`false`	取消选中此复选框时返回的值。当多个复选框绑定到同一 v-model 数组时，注意不适用
`indeterminate`	Boolean	`false`	使复选框处于不确定状态。通过.sync修饰符可同步
`switch`	Boolean	`false`	设置后，使用复选框外观呈现复选框

v-model

属性	事件
`checked`	`input`

事件

事件	参数	描述
`input`	`checked` - 复选框的值。当绑定到多个复选框时，value将是一个数组。	更改所选值时发出
`change`	`checked` - 复选框的值。当绑定到多个复选框时，value将是一个数组。	由于用户交互而更改选定值时发出

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件	命名输出	导入路径
`<b-form-checkbox-group>`	`BFormCheckboxGroup`	`bootstrap-vue`
`<b-form-checkbox>`	`BFormCheckbox`	`bootstrap-vue`

示例：

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

作为Vue.js插件导入

这个插件包含了上面列出的所有组件。插件还包括任何组件别名。

命名输出	导入路径
`FormCheckboxPlugin`	`bootstrap-vue`

示例：

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

表单复选框(Form Checkbox Inputs)

复选框组选项数组

选项作为对象数组

更改选项字段名称

内联和堆叠复选框

控制尺寸

复选框值和 v-model

多个复选框和可访问性

按钮样式复选框

单个复选框按钮样式

分组按钮样式复选框

切换样式复选框

单独的复选框开关样式

分组开关样式复选框

开关尺寸

非定制检查输入（纯文本）

上下文状态

上下文状态和验证示例

所需约束

自动聚焦

不确定（三态）支持

不确定的状态和可访问性

组件引用

组件别名

属性

v-model

插槽

事件

组件别名

属性

v-model

事件

导入单个组件

作为Vue.js插件导入

复选框值和 `v-model`