CheckboxCardGroup

Multi-select group of CheckboxCards presented as interactive cards. Shares size, indicator, icon, and checked state with its items via context. With checkedValues it is a Base UI CheckboxGroup (role="group") that owns which cards with a value are checked.

Matte finish

Non-reflective, fingerprint-resistant.

Usage

import { CheckboxCard, checkboxCardAnatomy, CheckboxCardContent, CheckboxCardDescription, CheckboxCardGroup, CheckboxCardGroupProps, CheckboxCardIcon, CheckboxCardProps, CheckboxCardTitle } from "@instruments/materia-ui/components/checkbox-card";

Best practices

Use CheckboxCardGroup for multi-select cards and RadioCardGroup for single-select - a checkbox group lets any number be on at once.
Set size/icon/indicatorSide/showIndicator once on the group; every CheckboxCard reads them from context - don't repeat them per item.
To control the set, give each card a value, drive checkedValues (a string[]) and toggle inside onCheckedChange(value, checked); without checkedValues each card keeps its own checked/defaultChecked.
Each card is one tab stop and toggles with Space; checkboxes don't rove, so Tab (not the arrow keys) moves between cards.

Props

CheckboxCard

Prop	Type	Description
checked	`boolean \| undefined`	Controlled checked state
defaultChecked	`boolean \| undefined`	Default checked state for uncontrolled usage
disabled	`boolean \| undefined`	Whether the checkbox is disabled
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>> \| undefined`	Icon to display as indicator (overrides group-level icon)
name	`string \| undefined`	Name for form submission
onCheckedChange	`((checked: boolean) => void) \| undefined`	Callback when checked state changes
required	`boolean \| undefined`	Whether the checkbox is required
suffixIcon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>> \| undefined`	Icon to display at the end of the card
value	`string \| undefined`	Value for form submission

CheckboxCardGroup

Prop	Type	Default	Description
checkedValues	`string[]`		Controlled checked values
disabled	`boolean`		Whether the group is disabled
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`		Icon to display instead of the indicator
indicatorSide	`"end" \| "start"`	`"start"`	Position of the indicator/icon.
name	`string`		Name for form submission
onCheckedChange	`(value: string, checked: boolean) => void`		Callback when an item changes
required	`boolean`		Whether the group is required
showIndicator	`boolean`	`true`	Show the checkbox indicator on each item.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"base"`

Also exports

constcheckboxCardAnatomy
componentCheckboxCardContent
componentCheckboxCardDescription
interfaceCheckboxCardGroupProps
componentCheckboxCardIcon
interfaceCheckboxCardProps
componentCheckboxCardTitle

Anatomy

CheckboxCardGroup

checkbox-card-group

Multi-select group of option cards

CheckboxCard

checkbox-card-item

Selectable card representing a single option

CheckboxCardIcon

checkbox-card-icon

Leading icon or checkbox indicator

CheckboxCardContent

checkbox-card-content

Text stack with title and description

CheckboxCardTitle

checkbox-card-title

Option label

CheckboxCardDescription

checkbox-card-description

Supporting detail for the option

Composition

Builds on

Center, Flex, InputCard