Skip to content
On this page

Checkbox ​

Checkboxes allow the user to select one or more items from a set.

Checkboxes can be used to turn an option on or off.

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

We retain all attributes and events of native input

Usage ​

Basic checkboxs ​

Checkbox is a controlled component, use v-model to switch the checked status.

Size ​

Use the size prop or customize the font size of the svg icons to change the size of the checkboxes.

Color ​

The color prop makes you can customize the color of component.

You can use build-in theme color 'primary' | 'secondary' | 'tertiary' | 'error'

Or use a callback funtion to accecc our theme object to get the color

Also, simply pass a CSS-Supported color worked

Icon ​

Use customize icon by named slot.

Use the data from the slot to make the icon more compatible.

Use with array ​

Also, v-model accept array to implement the function like CheckboxGroup

MIT Licensed