All components
Checkbox Card
Selectable cards with label, description, and checkmark indicator in surface, subtle, outline, and solid variants.
AnalyticsTrack page viewsBackupsDaily snapshots
Variants
AnalyticsTrack page viewsBackupsDaily snapshots
surfaceAnalyticsTrack page viewsBackupsDaily snapshots
subtleAnalyticsTrack page viewsBackupsDaily snapshots
outlineAnalyticsTrack page viewsBackupsDaily snapshots
solidSizes
AnalyticsTrack page viewsBackupsDaily snapshots
smAnalyticsTrack page viewsBackupsDaily snapshots
mdAnalyticsTrack page viewsBackupsDaily snapshots
lgInstall
zsh — checkbox-card
1bunx stylexblocks add checkbox-cardUsage — Base UI
checkbox-card.tsx
1234567891011121314151617181920import { CheckboxCard } from "#components/ui/base-ui/checkbox-card.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is Base UI's Checkbox.Root 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.Root> );}
// controlled: <CheckboxCard.Root checked={on} onCheckedChange={setOn}>