Checkbox
Checkbox is a form input component that allows users to select one or more options from a set.
It supports various colors and sizes to match your application's design system.
Basic Usage
Code Example
Basic.vue
Checkbox is a form input component that allows users to select one or more options from a set.
It supports various colors and sizes to match your application's design system.
Checkbox is a standalone component.
The Checkbox component is a form input that allows users to select one or more options from a set. It supports v-model for two-way binding and offers various styling options.
| Checkbox Props | Type | Description |
|---|---|---|
modelValue | any | |
validator | boolean | Adds the |
theme-controller | boolean | When checked, the page's theme will match the checkbox's |
color | string | Sets the color of the checkbox. Options: - |
| primary | boolean | Sets the color to |
| secondary | boolean | Sets the color to |
| accent | boolean | Sets the color to |
| success | boolean | Sets the color to |
| warning | boolean | Sets the color to |
| info | boolean | Sets the color to |
| error | boolean | Sets the color to |
size | string | Sets the size of the checkbox. Options: - |
| lg | boolean | Sets the size to |
| md | boolean | Sets the size to |
| sm | boolean | Sets the size to |
| xs | boolean | Sets the size to |
| Checkbox Events | Arguments | Description |
|---|---|---|
update:modelValue |
Below are additional usage examples for the Checkbox component. For basic usage, see the intro.
Showcases a checkbox with a label using the Label and LabelText components.
Demonstrates all available color options for the Checkbox component.
Demonstrates all available size options for the Checkbox component.