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.

Updated on v2.0.0

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.

Single color

Orange

Apple

Pineapple

Grape

---

Different Color

Red

Green

Blue

Purple

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Custom Checkbox

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

Added since v2.0.7

Accept the terms and use

Value:

CSS Variables

Added since v2.0.0

--md-checkbox-disabled-bg: transparent;
--md-checkbox-disabled-opacity: calc(var(--md-field-disabled-opacity) - .2);
--md-checkbox-border-radius: .25rem;
--md-checkbox-margin: .5rem 1rem .5rem 0;
--md-checkbox-size: 20px;
--md-checkbox-stroke: 2px;
--md-checkbox-touch-size: 40px;
--md-checkbox-indeterminate-width: 12px;
--md-checkbox-checkmark-height: 13px; 
--md-checkbox-checkmark-width: 7px; 
--md-checkbox-checkmark-pos-x: 4px; 
--md-checkbox-checkmark-pos-y: 0;

--md-checkbox-bg: #{$color};             // background color when checked
--md-checkbox-color: #{$checked-color};  // border color when checked
--md-checkbox-state-bg: transparent;     // background color when checked or un-checked
--md-checkbox-state-color: currentColor; // border color when checked or un-checked

API Reference

BsCheckbox

Property	Type	Default	Description
color	String	'default'	The component's color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
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	'default'	The component's color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
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.
external-validator deprecated	TValidator		Use validator instead.
help-text	String		The help text to display below the component.
indeterminate	Boolean	false	Sets default indeterminate state for the checkbox.
items required	TCheckboxProps[]		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	Boolean	true	Keeps help text visible when the component is not focused.
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 More details, see Text Field - TValidator

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.

TCheckboxProps

The TCheckboxProps has properties as described below:

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