Checkbox

Usage

Checkboxes allow user to select many options from a limited number of choices. Use checkboxes in forms, for filtering purposes, or to let user accept certain conditions. Checkboxes have 3 states: selected, unselected, and mixed.

Best practices

Use checkboxes when it’s possible to select more than one option.

Don't

Don’t use the checkbox for mutually exclusive single-select choices. Use the radio button instead.

Use hint to provide additional information about checkbox.

Don't

Don’t hide additional information behind the tooltips or icons.

Use mixed state to represent value of a group of checkboxes, and for bulk selection of items.

Don't

Don’t use mixed state on a single checkbox.

Examples

Live Preview

Props

Name	Description	Type	Default
aria-label	Defines a string value that labels an element.	string
error	Displays an error description and changes the style of the input	string
hint	Text displayed under the label with additional information	string
indeterminate	The checkbox is still either checked or unchecked as a state.	boolean	`false`
label	Label of the input element	string
v-model model-value v2, wc checked v1	Controls whether the input is checked or not. If array is provided the input is checked if the array contains the value property.	boolean\|array	`false`
required	Determines whether the input is required or not.	boolean
value	Value of the input. Please note that value is required only if you pass array as v-model	boolean\|number\|string

Events

Name	Description	Type
v-model update:modelValue v2, wc change v1	If Array is passed into v-model this event emits an array of values from all selected checkboxes. In Boolean is passed into v-model this event emits if checkbox is checked or not regardless of its value. *	{ "names": [ "Boolean, Array" ] }

Slots

Name	Description
hint	Use it to provide rich content for checkbox hint. Takes precedence over property.