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 | The aria-label of the checkbox |
| - |
| arrayValue | Same as native |
|
|
| checkedIcon | Overrides the |
|
|
| color | Color of the component (theme string or |
|
|
| dirty | Sets the dirty state of the component |
|
|
| disabled | Applies |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| falseValue | Overrides the returned value when it's not checked. |
|
|
| id | Applies |
|
|
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| indeterminate | Same as native |
|
|
| indeterminateIcon | Overrides the |
|
|
| indeterminateValue | Overrides a state value that is not set. |
|
|
| label | Same as native |
|
|
| leftLabel | Moves the label on the left of a component. |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| messages | Description messages for the component. |
|
|
| modelValue | 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. |
|
|
| trueValue | Overrides the returned value when it's checked. |
|
|
| vertical |
|
|
Events #
| Name | Description |
|---|---|
blur | On blur. |
focus | On focus. |
input | Emitted when the component needs to change the value. The event argument is: |
update:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
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-label-cursor | pointer |
| --va-checkbox-font-size | 15px |
| --va-checkbox-line-height | 20px |
| --va-checkbox-background | transparent |
| --va-checkbox-square-width | 1.25rem |
| --va-checkbox-square-min-width | 1.25rem |
| --va-checkbox-square-height | 1.25rem |
| --va-checkbox-square-border | solid var(--va-form-element-border-width) var(--va-background-border) |
| --va-checkbox-square-border-radius | calc(var(--va-form-element-border-radius) / 2) |
| --va-checkbox-horizontal-gap | 0.5em |
| --va-checkbox-vertical-gap | 0.3em |
| --va-checkbox-vertical-padding | var(--va-checkbox-vertical-gap) 0 var(--va-checkbox-vertical-gap) var(--va-checkbox-horizontal-gap) |
| --va-checkbox-horizontal-padding | 0 var(--va-checkbox-horizontal-gap) |
| --va-checkbox-right-padding | 0 var(--va-checkbox-horizontal-gap) 0 0 |
| --va-checkbox-left-padding | 0 0 0 var(--va-checkbox-horizontal-gap) |