Checkbox #
Checkboxes allow the user to select multiple options from a set.
Examples #
Standard #
Perfectly works with v-model
by default.
Label #
You can add a label text by setting the label
property. You can also set the left-label
property to move your label on the left side of a checkbox.
Indeterminate #
Coloring #
Grouped (Array) #
Just add the same v-model
to multiple checkboxes, and set the array-value
prop.
Errors #
You can show your error messages while using va-checkbox
with form.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaLabel |
| - | |
arrayValue |
| - | |
checkedIcon |
|
| |
color |
|
| |
disabled |
|
| |
error |
| - | |
errorCount |
|
| |
errorMessages |
| - | |
falseValue |
|
| |
id |
|
| |
immediateValidation |
|
| |
indeterminate |
|
| |
indeterminateIcon |
|
| |
indeterminateValue |
|
| |
label |
|
| |
leftLabel |
|
| |
loading |
|
| |
messages |
|
| |
modelValue |
|
| |
name |
|
| |
preset |
| - | |
readonly |
|
| |
rules |
|
| |
stateful |
|
| |
success |
|
| |
trueValue |
|
|
Events #
Name | Description |
---|---|
blur | On blur. |
focus | On focus. |
input | Emitted when the component needs to change the value. The event argument is:
|
update:error | |
update:errorMessages | |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Css Variables #
Name | Default Value |
---|---|
--va-checkbox-display | inline-block |
--va-checkbox-input-padding | 0 |
--va-checkbox-input-cursor | pointer |
--va-checkbox-disabled-cursor | default |
--va-checkbox-readonly-cursor | initial |
--va-checkbox-label-display | inline-block |
--va-checkbox-font-size | 15px |
--va-checkbox-line-height | 20px |
--va-checkbox-square-width | 1.25rem |
--va-checkbox-square-min-width | 1.25rem |
--va-checkbox-square-height | 1.25rem |
--va-checkbox-square-background-color | transparent |
--va-checkbox-square-border | solid 0.0625rem var(--va-background-border) |
--va-checkbox-square-border-radius | 0.125rem |