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