Checkbox

SVG

import { ref } from 'vue' const checked1 = ref(false) const checked2 = ref(true) const checked3 = ref(false) const checked4 = ref(true) const checked5 = ref(false)

Basic Usage

Checkbox

Demo loads on client.

Label First (labelPlacement = start)

Checkbox (label start)

Demo loads on client.

No Label

When there is no label/slot, pass aria-label.

Checkbox (no label)

Demo loads on client.

Disabled State

Checkbox (disabled)

Demo loads on client.

Using Slots

Checkbox (slot)

Demo loads on client.

API

Props

Prop	Description	Type	Default
modelValue / v-model	Description for modelValue / v-model.	`boolean`	`false`
disabled	Description for disabled.	`boolean`	`false`
label	Description for label.	`string`	-
labelPlacement	Description for labelPlacement.	`'start' \| 'end'`	`'end'`
ariaLabel	Description for ariaLabel.	`string`	-

Events

Event	Description	Params
change	Description for change.	`(value: boolean) => void`
update:modelValue	Description for update:modelValue.	`(value: boolean) => void`

Slots

Column	Description
default	Description for default.