Form
Checkbox Cards
Card-style multi-select. Each card has a built-in checkbox with highlighted selected state.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/checkbox-cards
Examples
Multi-select cards
Card-style multi-select with highlighted state and a live list of choices.
Enabled: analytics
Two columns
Lay cards out in a grid for compact add-on pickers.
Disabled option
Mark an option unavailable while keeping it visible.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { CheckboxCards, CheckboxCardsItem } from "@codefast/ui/checkbox-cards";
<CheckboxCards value={list} onValueChange={setList}>
<CheckboxCardsItem value="a">…</CheckboxCardsItem>
</CheckboxCards>
API reference
Props for each part of the component. All native element props are also forwarded.
CheckboxCards
A multi-selection group of cards sharing one value array.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string[] / (value: string[]) => void | — | Controlled list of selected card values. |
| defaultValue | string[] | — | Initial selection when uncontrolled. |
CheckboxCardsItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Added to the array when the card is selected (required). |
| disabled | boolean | false | Makes a single card non-selectable. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves between cards. |
| Space | Toggles the focused card. |
- Each card is a checkbox with its own aria-checked.
- The whole card is the hit target, not just a small box.
- Keep card content concise so the selected state reads clearly.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for picking several rich options (features, add-ons).
- Show a short description on each card.
Don’t
- Don’t use for single-select — that’s Radio Cards.
- Don’t put multiple actions inside a card.