Choice Cards
Selectable cards on the shadcn checkbox and field primitives: a 16px-radius card that presses on tap, with a ring that fills and a check that draws in on selection.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { ChoiceBoxCards } from '@/components/component-kit/items/choicebox-cards';
export function Example() { return ( <ChoiceBoxCards legend="Choose your stack" options={[{ value: "next", label: "Next.js" }, { value: "tanstack", label: "TanStack" }]} defaultValue={["next"]} /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | ChoiceBoxCardOption[] | — | Selectable card labels and descriptions. |
onValueChange | (values: string[]) => void | — | Called when the selection changes. |