BundyUI

Selection

CheckboxLabel

CheckboxGroup

A set of checkboxes sharing a single array `v-model`.

vue
<UiCheckboxGroup :items="..." />

Options

One block per prop — what it does, and what it looks like set.

Items

required

items 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.

email

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.

Notification channels

Required

required adds an asterisk to the legend.

Interests*

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 tinted surface that fills in when checked, which pairs well with per-item descriptions.

Highlight

highlight fills each checked card with the group's color instead of the neutral fill. Unchecked cards stay neutral, and it only applies to variant='card'.

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.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Indicator position on cards

Every indicator works on a card too. start is the default; end moves the box to the right edge, for when the label should lead; hidden drops it, leaving the card's fill to show which are checked — it stays a real checkbox underneath, so it's still clickable and announced.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
CheckboxGroupItem[]
—
The list of checkbox options to render.
modelValue
(string | number)[]
—
Controls the selected values. Omit this to let the group manage its own state internally (starting from `defaultValue`); pass it to fully control the selection yourself.
defaultValue
(string | number)[]
—
The selected values when uncontrolled.
legend
string
—
Heading text displayed above the group of options.
required
boolean
false
Shows a required asterisk next to the legend.
disabled
boolean
false
Disables the whole group, preventing any selection changes.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'primary'
Color of the checked checkbox indicators.
variant
"list" | "card"
'list'
Visual style of each option; 'card' wraps each option in a tinted card that fills in when checked.
highlight
boolean
false
Fills each checked card with `color` instead of the neutral fill. Only affects `variant="card"`.
orientation
"horizontal" | "vertical"
'vertical'
Layout direction of the options.
indicator
"start" | "end" | "hidden"
'start'
Position of the checkbox indicator relative to the label; 'hidden' removes it entirely.

Emits

Event
Payload
Description
update:modelValue
[value: (string | number)[]]
—

Types

ts
interface CheckboxGroupItem {
    label?: string;
    description?: string;
    value: string | number;
    disabled?: boolean;
}