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 |
---|---|---|---|
aria-label | The aria-label of the checkbox |
| - |
array-value | Same as native |
| - |
checked-icon | Overrides the |
|
|
color | Color of the component (theme string or |
|
|
disabled | Applies |
|
|
error | Show component in error state. |
| - |
error-count | Number of error messages displayed. |
|
|
error-messages | Error messages for the component. |
| - |
false-value | Overrides the returned value when it's not checked. |
|
|
id | Applies |
|
|
immediate-validation | Sets the validation to be performed when the component is mounted |
|
|
indeterminate | Same as native |
|
|
indeterminate-icon | Overrides the |
|
|
indeterminate-value | Overrides a state value that is not set. |
|
|
label | Same as native |
|
|
left-label | Moves the label on the left of a component. |
|
|
loading | Indicates that something is loading (spinner icon). |
|
|
messages | Description messages for the component. |
|
|
model-value | The value of the |
|
|
name | Applies |
|
|
preset | Named preset combination of component props. |
| - |
readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
rules | Validation rules . |
|
|
stateful | Add possibility to work with component without setting |
|
|
success | Show component in success state. |
|
|
true-value | Overrides the returned value when it's checked. |
|
|
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-error-messages | |
update-model-value | 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 |