Checkbox Card

Multi-select card control. Extends Checkbox into a clickable panel with label, description, and optional icon.

CSS support

Syntax highlight for CSS files

Cloud sync

Automatic backups to the cloud

<CheckboxCardGroup className="max-w-lg grid-cols-2" defaultValue={["css"]}>  <CheckboxCard value="css">    <CheckboxCardContent>      <CheckboxCardLabel>CSS support</CheckboxCardLabel>      <CheckboxCardDescription>        Syntax highlight for CSS files      </CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard>  <CheckboxCard value="cloud">    <CheckboxCardContent>      <CheckboxCardLabel>Cloud sync</CheckboxCardLabel>      <CheckboxCardDescription>        Automatic backups to the cloud      </CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard></CheckboxCardGroup>

Usage

import {
  CheckboxCard,
  CheckboxCardContent,
  CheckboxCardDescription,
  CheckboxCardGroup,
  CheckboxCardIndicator,
  CheckboxCardLabel,
} from "@reva/ui";

Wrap cards in CheckboxCardGroup for multi-select state management. Each CheckboxCard requires a value prop when used inside a group.

Composition

Use the following composition to build a CheckboxCard :

CheckboxCardGroup
  CheckboxCard
    CheckboxCardIcon
    CheckboxCardContent
      CheckboxCardLabel
      CheckboxCardDescription
    CheckboxCardIndicator

Examples

With icons

CSS support

Enable autocomplete and syntax highlight for CSS files

Cloud sync

Enable automatic backups to the cloud

Excel export

Allow users to export data to Excel files locally

<CheckboxCardGroup className="max-w-2xl grid-cols-3" defaultValue={["css"]}>  <CheckboxCard value="css">    <CheckboxCardContent>      <CheckboxCardIcon>        <FileCode />      </CheckboxCardIcon>      <CheckboxCardLabel>CSS support</CheckboxCardLabel>      <CheckboxCardDescription>        Enable autocomplete and syntax highlight for CSS files      </CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard>  <CheckboxCard value="cloud">    <CheckboxCardContent>      <CheckboxCardIcon>        <CloudArrowUp />      </CheckboxCardIcon>      <CheckboxCardLabel>Cloud sync</CheckboxCardLabel>      <CheckboxCardDescription>        Enable automatic backups to the cloud      </CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard>  <CheckboxCard value="excel">    <CheckboxCardContent>      <CheckboxCardIcon>        <File />      </CheckboxCardIcon>      <CheckboxCardLabel>Excel export</CheckboxCardLabel>      <CheckboxCardDescription>        Allow users to export data to Excel files locally      </CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard></CheckboxCardGroup>

Disabled

Disabled optionCannot be selected

<CheckboxCardGroup className="max-w-sm" disabled>  <CheckboxCard value="a">    <CheckboxCardContent>      <CheckboxCardLabel>Disabled option</CheckboxCardLabel>      <CheckboxCardDescription>Cannot be selected</CheckboxCardDescription>    </CheckboxCardContent>    <CheckboxCardIndicator />  </CheckboxCard></CheckboxCardGroup>

Props

CheckboxCardGroup

Prop	Type	Default	Description
`defaultValue`	`string[]`	`[]`	Initial selected values (uncontrolled).
`value`	`string[]`	—	Controlled selected values.
`onValueChange`	`(value: string[]) => void`	—	Called when selection changes.
`disabled`	`boolean`	—	Disables all cards in the group.

CheckboxCard

Prop	Type	Default	Description
`value`	`string`	—	Required inside a group. Identifies this card.
`checked` / `defaultChecked`	`boolean`	—	Standalone controlled / uncontrolled state.
`onCheckedChange`	`(checked: boolean) => void`	—	Standalone change handler.
`disabled`	`boolean`	—	Disables this card.

Checkbox Card

On this page