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 |