CheckboxGroup
A set of checkboxes sharing a single array `v-model`.
<UiCheckboxGroup :items="..." />Items
requireditems are the options, each a label and a value. An item can also carry its own description or a disabled flag.
Model value
modelValue is the checked values, two-way bound — always an array.
modelValue is always an array of the selected values, even if only one item can realistically be checked — there's no single-value mode (use RadioGroup for that).
Default value
defaultValue sets which options start checked when uncontrolled.
Legend
legend is the heading above the options — what the whole group is asking, stated once so each label doesn't have to repeat it.
Required
required adds an asterisk to the legend.
Disabled
Disables the whole group. Individual options carry their own disabled flag — the first group below mixes both.
Color
color is the checked indicator's color.
Variant
variant sets the shape of each option. list stacks plain rows; card wraps each one in a bordered, highlightable surface, which pairs well with per-item descriptions.
Orientation
orientation stacks the options or lays them in a row. Vertical is the safer default — a row only works for two or three short labels, and wraps badly on narrow screens.
vertical (default)
horizontal
Indicator
indicator sets which side the box sits on, or hidden to drop it — for card options where the highlight already says which are checked.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
(string | number)[]"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'"list" | "card"'list'"start" | "end" | "hidden"'start'Emits
update:modelValue[value: (string | number)[]]Types
interface CheckboxGroupItem {
label?: string;
description?: string;
value: string | number;
disabled?: boolean;
}