Model value
modelValue is whether the box is checked, bound two-way with v-model.
Label
label is the text beside the box — and the whole of it is clickable, not just the box.
Description
description is secondary text below the label — the place for the caveat that would otherwise make the label too long to scan.
Required
required shows an asterisk after the label. Marking the field is all it does — the validation belongs to the form.
Disabled
disabled disables interaction with the checkbox.
Color
color is the checked state's color.
Variant
variant decides how much surface the row carries. list is a plain row with no box; card wraps the whole row in a bordered surface that highlights when checked, which suits a standalone option toggle.
variant="card" wraps the whole row in a bordered, highlightable card rather than changing the indicator itself.
Indicator
indicator sets which side the box sits on, or hidden to drop it entirely.
indicator="hidden" removes the visible box but keeps the label clickable and the checkbox semantically checked/unchecked — useful for card-style toggles where the box would be redundant.
Hidden indicator stays functional
indicator="hidden" removes the visible box but keeps the label clickable and the checkbox semantically checked/unchecked — useful for card-style toggles where the box would be redundant.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'"list" | "card"'list'"start" | "end" | "hidden"'start'Slots
defaultEmits
update:modelValue[value: boolean]