Checklist

A checklist is a field control for choosing multiple values from a short list of options on the page — matching Figma checkbox Examples (group label + several checkbox inputs + validation copy).

Overview

Pass options (array of { value, label?, … }) and bind modelValue as an array of selected **value**s — same idea as catnip-dropdown with multiple.

catnip-checklist also provides:

• Field label (prop or label slot), required / optional markers, info tooltip
• supporting-text below the group (validation, hints)
• role="group" with aria-labelledby / aria-describedby wiring

Use a single catnip-checkbox when you only need one option. Use catnip-dropdown multiple for long lists in a compact panel.

Per-option errors

Set intent and supportingText on each options row for row-level validation. Set intent and supporting-text on the checklist for group-level copy. The live example shows Option B in danger with supporting text when it conflicts with Option A.

See Guidelines — Validation for a dynamic pattern.

Live example

Related

• Checkbox — Overview — one standalone option
• Inputs overview — shared label and supporting-text props