BundyUI

Data

CheckList

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

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

Options

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

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. It also changes how the labels read: an interactive list is a to-do, so the outstanding items are the ones that matter — they stay full strength and checked labels tone back behind their strikethrough.

  • 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
  • primary
  • secondary
  • success (default)
  • error
  • warning
  • info
  • pending

Disabled

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

Cross unchecked

crossUnchecked fills the indicator of unchecked items with a red cross instead of leaving it an empty circle. Reach for it when what's missing carries as much meaning as what's there, like a plan comparison.

  • Unlimited projects
  • Custom domains
  • Priority support
  • SSO and audit logs
  • Unlimited projects
  • Custom domains
  • Priority support
  • SSO and audit logs

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. This also changes how labels read: on a to-do list the outstanding items are the ones that matter, so they stay full strength and checked labels tone back behind their strikethrough.
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.
crossUnchecked
boolean
false
Marks unchecked items with a red cross instead of leaving an empty circle. Useful for lists where a missing item is the point, like a feature comparison.

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;
}