All components
Checkbox Card
Selectable cards with label, description, and checkmark indicator in surface, subtle, outline, and solid variants.
Variants
surface
subtle
outline
solid
Sizes
sm
md
lg
Install
zsh — checkbox-card
1bunx stylexblocks add checkbox-cardUsage — Ark UI
checkbox-card.tsx
123456789101112131415161718192021import { CheckboxCard } from "#components/ui/ark-ui/checkbox-card.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is an Ark checkbox styled as a card; it mirrors the checked state // so every part can style itself from it <CheckboxCard.Root defaultChecked variant="outline" size="md" palette={indigoPalette}> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>Analytics</CheckboxCard.Label> <CheckboxCard.Description>Track page views</CheckboxCard.Description> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> <CheckboxCard.HiddenInput /> </CheckboxCard.Root> );}
// controlled: <CheckboxCard.Root checked={on} onCheckedChange={(d) => setOn(d.checked === true)}>