BundyUI

Data

CheckList

A list of items with a checked/unchecked circular indicator, either a static display or an interactive toggleable list.

html
<UiCheckList :items="..." />

Items

required

items is the list, each entry a label plus an optional description shown as secondary text. Every item carries its own checked flag, defaulting to true, so a read-only feature list needs nothing else.

  • Provider to control display delay globally.
  • Opens when the trigger is focused or hovered.
  • Closes when the trigger is activated or when pressing escape.
  • Supports custom timings.
  • MarketingProduct news and announcements
  • SecurityAlerts about your account
  • NewsletterMonthly digest of updates

Model value

modelValue takes over the checked set from the items' own flags, as a single array v-model — exactly like CheckboxGroup. Only meaningful with interactive.

With interactive, it behaves like CheckboxGroup instead: a shared modelValue array of checked values, seeded from whichever items start checked, and each item's own checked is only read once as that initial state.

Interactive

interactive turns each row into a toggle. Off — the default — the list is a static display and a click does nothing, which is what a feature list wants.

  • Design reviewed
  • Implementation
  • Tests written
  • Shipped

Without interactive, each item's own checked flag (defaulting to true) drives its indicator directly and clicking does nothing — this is the mode for a static feature/requirements list.

Color

color themes the indicators. It's most useful for saying what kind of list this is at a glance: success for what's included, error for what isn't.

  • neutral (default)
  • primary
  • secondary
  • success
  • error
  • warning
  • info
  • pending

Disabled

Disables the whole list. Individual items carry their own disabled flag — the first list below mixes both.

Strikethrough

strikethrough renders checked items' labels with a line-through.

  • Design reviewed
  • Implementation
  • Tests written
  • Shipped

Interactivity is separate from checked state

A non-interactive list reads each item's own checked flag and never changes it. An interactive list instead manages a shared array of checked values, exactly like CheckboxGroup.

API Reference

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

Props

Prop
Type
Default
Description
itemsrequired
CheckListItem[]
—
The list of items to display.
modelValue
(string | number)[]
—
Controls the checked values. Omit this to let the list manage its own state internally (starting from each item's `checked`); pass it to fully control the selection yourself. Only meaningful when `interactive` is enabled.
interactive
boolean
false
Lets items be toggled by clicking them. Renders as a plain, read-only display list otherwise.
color
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'success'
Color of the checked indicator.
disabled
boolean
false
Disables the whole list, preventing any interaction.
strikethrough
boolean
false
Renders a checked item's label with a strikethrough.

Emits

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

Types

ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";
ts
interface CheckListItem {
    /**
     * Text label for this item.
     */
    label: string;

    /**
     * Secondary text shown below the label.
     */
    description?: string;

    /**
     * Identity used for `v-model` when the list is interactive. Falls back to the item's index.
     */
    value?: string | number;

    /**
     * Whether this item is checked. Used directly when the list isn't interactive; only used as the
     * initial state when interactive and uncontrolled.
     * @defaultValue true
     */
    checked?: boolean;

    /**
     * Disables interaction with this item. Has no effect on a non-interactive list.
     * @defaultValue false
     */
    disabled?: boolean;
}