Checkbox
#

Checkboxes allow the user to select multiple options from a set.

Examples
#

Standard
#

Perfectly works with v-model by default.

Open in GitHub

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.

Open in GitHub

Indeterminate
#

Open in GitHub

Coloring
#

Open in GitHub

Grouped (Array)
#

Just add the same v-model to multiple checkboxes, and set the array-value prop.

[ "one", "four" ]
Open in GitHub

Errors
#

You can show your error messages while using va-checkbox with form.

Error message
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaLabel

String

-

arrayValue

String | Boolean | Object | Number

-

checkedIcon

String

"va-check"

color

String

"primary"

disabled

Boolean

false

error

Boolean

-

errorCount

String | Number

1

errorMessages

Array | String

-

falseValue

any

false

id

String

""

immediateValidation

Boolean

false

indeterminate

Boolean

false

indeterminateIcon

String

"remove"

indeterminateValue

Boolean | Array | String | Object

null

label

String

""

leftLabel

Boolean

false

loading

Boolean

false

messages

Array | String

[]

modelValue

Boolean | Array | String | Object

false

name

String

""

preset

String

-

readonly

Boolean

false

rules

Array

[]

stateful

Boolean

false

success

Boolean

false

trueValue

any

true

Events #

NameDescription

blur

On blur.

focus

On focus.

input

Emitted when the component needs to change the value. The event argument is:

(event: Event) => void

update:error

update:errorMessages

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model

Css Variables #

NameDefault 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