Form Checkbox

For cross browser consistency, <b-form-checkbox-group> and <b-form-checkbox> use Bootstrap's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input.

Component reference

`<b-form-checkbox-group>`

View source

<b-form-checkbox-group> Component aliases
<b-form-checkbox-group> Properties
<b-form-checkbox-group> v-model
<b-form-checkbox-group> Slots
<b-form-checkbox-group> Events

Component aliases

<b-form-checkbox-group> can also be used via the following aliases:

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

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`aria-invalid`	`Boolean` or `String`	`false`	Sets the 'aria-invalid' attribute value on the wrapper element. When not provided, the 'state' prop will control the attribute
`autofocus`	`Boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
`button-variant`	`String`		Specifies the Bootstrap contextual color theme variant the apply to the button style checkboxes
`buttons`	`Boolean`	`false`	When set, renderes the checkboxes in this group with button styling
`checked` v-model	`Array`	`[]`	The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`disabled-field`	`String`	`'disabled'`	Field name in the `options` array that should be used for the disabled state
`form`	`String`		ID of the form that the form control belongs to. Sets the `form` attribute on the control
`html-field` Use with caution	`String`	`'html'`	Field name in the `options` array that should be used for the html label instead of text field
`id`	`String`		Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
`name`	`String`		Sets the value of the `name` attribute on the form control
`options`	`Array` or `Object`	`[]`	Array of items to render in the component
`plain`	`Boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
`required`	`Boolean`	`false`	Adds the `required` attribute to the form control
`size`	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`stacked`	`Boolean`	`false`	When set, renders the checkbox group in stacked mode
`state`	`Boolean`	`null`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
`switches`	`Boolean`	`false`	When set, renders the checkboxes in the group with switch styling
`text-field`	`String`	`'text'`	Field name in the `options` array that should be used for the text label
`validated`	`Boolean`	`false`	When set, adds the Bootstrap class 'was-validated' to the group wrapper
`value-field`	`String`	`'value'`	Field name in the `options` array that should be used for the value

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

`v-model`

Property	Event
`checked`	`input`

Slots

Name	Description
`default`	Content (form checkboxes) to place in the form checkbox group
`first`	Slot to place b-form-checks so that they appear before checks generated from options prop

Events

Event	Arguments	Description
`change`	`checked` - Value of checkboxes. Value will be an array	Emitted when selected value(s) is changed due to user interaction
`input`	`checked` - Value of checkboxes. Value will be an array	Emitted when the checked value is changed

`<b-form-checkbox>`

View source

<b-form-checkbox> Component aliases
<b-form-checkbox> Properties
<b-form-checkbox> v-model
<b-form-checkbox> Slots
<b-form-checkbox> Events

Component aliases

<b-form-checkbox> can also be used via the following aliases:

<b-checkbox>
<b-check>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`aria-label`	`String`		Sets the value of `aria-label` attribute on the rendered element
`aria-labelledby`	`String`		The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute
`autofocus`	`Boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
`button`	`Boolean`	`false`	When set, renders the checkbox with the appearance of a button
`button-variant`	`String`		Applies on of Bootstrap's theme colors when in 'button' mode
`checked` v-model	`Any`	`null`	The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`form`	`String`		ID of the form that the form control belongs to. Sets the `form` attribute on the control
`id`	`String`		Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
`indeterminate`	`Boolean`	`false`	Renders the checkbox in an indeterminate state. Syncable via the .sync modifier
`inline`	`Boolean`	`false`	When set, renders the checkbox as an inline element rather than as a 100% width block
`name`	`String`		Sets the value of the `name` attribute on the form control
`plain`	`Boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
`required`	`Boolean`	`false`	Adds the `required` attribute to the form control
`size`	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`state`	`Boolean`	`null`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
`switch`	`Boolean`	`false`	When set, renders the checkbox with the appearance of a switch
`unchecked-value`	`Any`	`false`	Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array
`value`	`Any`	`true`	Value returned when this checkbox is checked

`v-model`

Property	Event
`checked`	`input`

Slots

Name	Description
`default`	Content to place in the form checkbox

Events

Event	Arguments	Description
`change`	`checked` - Value of checkbox(es). When bound to multiple checkboxes, value will be an array	Emitted when selected value(s) is changed due to user interaction
`input`	`checked` - Value of checkbox(es). When bound to multiple checkboxes, value will be an array	Emitted when the selected value(s) is changed

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-form-checkbox-group>`	`BFormCheckboxGroup`	`bootstrap-vue`
`<b-form-checkbox>`	`BFormCheckbox`	`bootstrap-vue`

Example:

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

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`FormCheckboxPlugin`	`bootstrap-vue`

Example:

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