Checkbox

BsCheckbox is a component that let users select one or more items from a list, or turn an item on or off.

Overview

BsCheckbox component mimics the HTML5 <input type="checkbox"> element. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.

Accept the terms and use

Value:

Checkbox Group

BsCheckboxGroup is a collection of BsCheckbox. Rather than create multiple <bs-checkbox>, it's better to create single <bs-checkbox-group>. <bs-checkbox-group> can be integrated with external validator plugin such as Vuelidate.

Please select colors

Red

Green

Blue

Purple

Selected colors: []

---

Select fruits

Orange

Apple

Pineapple

Grape

Selected fruits: []

INFO

<bs-checkbox-group> will be displayed in one column if the media query matches (max-width: 575px). And if the media query matches (min-width: 576px) it will try to fit up to four columns.

Multi Column

With <bs-checkbox-group>, collection of <bs-checkbox> can be arranged in multi-columns. When the number of <bs-checkbox> exceed the number of maximum columns, then the remaining <bs-checkbox> will be placed on the next row.

Multi Column

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Selected items: []

INFO

Multi columns are closely tied to the bootstrap class col-lg-*. Which means if the media query matches (min-width: 992px), it will be displayed correctly. And if the media query matches (min-width: 768px), it will be displayed in two columns only.

Colors

Use color property to change <bs-checkbox> or <bs-checkbox-group> color appearance. Additionally, you can set each checkbox of <bs-checkbox-group> to have different color.

Updated in v2.2.0

Single color

Orange

Apple

Pineapple

Grape

---

Different Color

Primary

Success

Danger

Warning

Custom Checkbox

The following is an example that demonstrate how to customize checkbox appearance via css variables.

Added in v2.0.7

Accept the terms and use

Value:

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-checkbox for better customization.

Updated in v2.2.0

.md-checkbox {
  --md-checkbox-size: #{vars.$checkbox-size};
  --md-checkbox-touch-size: #{vars.$checkbox-touch-size};
  --md-checkbox-border-radius: #{vars.$radius};
  --md-checkbox-stroke: #{vars.$checkbox-stroke};
  --md-checkbox-margin: #{vars.$checkbox-margin};
  --md-checkbox-indeterminate-width: #{vars.$checkbox-indeterminate-width};
  --md-checkbox-disabled-opacity: var(--md-field-disabled-opacity);
  --md-checkbox-checkmark-height: #{vars.$checkbox-checkmark-height};
  --md-checkbox-checkmark-width: #{vars.$checkbox-checkmark-width};
  --md-checkbox-checkmark-pos-x: 4px;
  --md-checkbox-checkmark-pos-y: 0;

  --md-checkbox-disabled-bg: transparent;
  --md-checkbox-unchecked-bg: transparent;
  --md-checkbox-unchecked-color: currentColor;
  --md-checkbox-checked-bg: #{$color};
  --md-checkbox-checked-color: #{$checked-color};
}

API Reference

BsCheckbox

Property	Type	Default	Description
color	String	'default'	The component's color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
disabled	Boolean	false	Enable/disable the component and the <input> element.
id	String		Sets the <input> element ID attribute. This property value is auto generates.
indeterminate	Boolean	false	Sets an indeterminate state for the checkbox.
model-value v-model	String|Number|Boolean		The checkbox value monitored by v-model to maintain checked state. v2.0.0
name	String		Sets the <input> element name attribute.
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets the <input> element required attribute.
value required	String|Number|Boolean		The <input> element value attribute.

Name	Arguments	Description
checked	(state:Boolean)	Triggers after the checkbox state changed. v2.0.0
update:model-value	(value:String|Number|Boolean)	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the field label.

BsCheckboxGroup

Property	Type	Default	Description
color	String		The component's color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
column	Number		Sets the maximum number of columns to display the checkbox.v2.0.0 When the number of items exceed the number of columns, then the remaining items will be displayed on the next row.
disabled	Boolean	false	Enable/disable the component.
help-text	String		The help text to display below the component.
indeterminate	Boolean	false	Sets default indeterminate state for the checkbox.
items required	TCheckboxInputProps[]		The configuration option to construct the <bs-checkbox>.
model-value v-model	String[]|Number[]		The component value monitored by v-model to maintain checked state. v2.0.0
name	String		Sets default <input> element name attribute.
persistent-help-text deprecated	Boolean	true	Use persistent-help-off instead.
persistent-help-off	Boolean	false	Prevents help text from being visible when the component is not focused. v2.2.0
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets the <input> element required attribute.
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0 See Text Field - TValidator for more details.

Name	Arguments	Description
update:model-value	(value:String[]|Number[])	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the component label.

TCheckboxInputProps

Property	Type	Description
value required	String|Number	The <bs-checkbox> value.
label required	String	The <bs-checkbox> label.
color	String	The <bs-checkbox> color appearance. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger and info.
disabled	Boolean	Create <bs-checkbox> in disabled state.
readonly	Boolean	Create <bs-checkbox> in readonly state.
id	String	Sets the <bs-checkbox> element ID attribute. This property value is auto generates.
name	Boolean	Sets the <bs-checkbox> element name attribute.
indeterminate	Boolean	Sets an indeterminate state for the <bs-checkbox>.