Checkbox Card

A selectable card pairing a checkbox with a title and description — bordered, rounded and brand-tinted when checked.

$bunx shadcn@latest add @nx-ui/checkbox-card

Basic group

Cards inside a CheckboxGroup share one value array via `defaultValue`/`value`; each card contributes its `value`. Clicking anywhere on a card toggles it.

Green-waste compostingWindrow processing for grass, hedge trimmings and leaf mould.Soil screeningpH, organic matter and contaminant testing before reuse.Bulk haulageScheduled runs between the depot and partner allotments.

Select all

A parent Checkbox drives the whole group: controlled `value` plus `indeterminate` on the parent while only some children are ticked.

All sites

Hartfield Composting SiteFour windrows turning; accepts all green-waste rounds.Cranbourne OrganicsFinished-compost collection point for member projects.Willowmere Community OrchardSeasonal intake for leaf mould and woodchip donations.

Disabled & invalid

Disabled cards dim and explain themselves; `aria-invalid` swaps the border for the destructive colour when a required choice is missing.

Ashdown Transfer StationClosed for audit — intake reopens once compliance sign-off lands.Hartfield Composting SiteIncluded in every seasonal contract; cannot be deselected.Duty-of-care declarationYou must accept the declaration before dispatching a movement.

Card grid

Cards sit happily in a grid for compact multi-select choices — here a two-column layout of collection add-ons.

Summer collectionsWoodchip drop-offLeaf-mould baysTurf & soil intake

API reference

Exported parts and their props, extracted from the component source.

Search nx-ui

Checkbox Card

Basic group

Select all

Disabled & invalid

Card grid

API reference

CheckboxCard1 prop

CheckboxCardDescription

CheckboxCardTitle