Checkbox Card

Usage

import { CheckboxCard } from "@chakra-ui/react"

<CheckboxCard.Root>
  <CheckboxCard.HiddenInput />
  <CheckboxCard.Control>
    <CheckboxCard.Content>
      <CheckboxCard.Label />
      <CheckboxCard.Description />
    </CheckboxCard.Content>
    <CheckboxCard.Indicator />
  </CheckboxCard.Control>
</CheckboxCard.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Description

Use the CheckboxCard.Description component to add a description to the checkbox card.

Group

Use the CheckboxGroup component to group multiple checkbox cards.

Sizes

Pass the size prop to the CheckboxCard.Root component to change the size of the checkbox card.

Variants

Use the variant prop to Pass the variant prop to the CheckboxCard.Root component to change the variant of the checkbox card.

Disabled

Pass the disabled prop to the CheckboxCard.Root component to make the checkbox card disabled.

Addon

Render additional content within the CheckboxCard.Addon component to add some more context to the checkbox card.

No Indicator

Here's an example of how to use the checkbox card without an indicator.

Icon

Here's an example of how to render custom icons within the checkbox card.

Closed Component

Here's how to setup the Checkbox card for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add checkbox-card

Here's how to use the it

<CheckboxCard label="Checkbox Card" />

Guides

CheckboxGroup + Field vs Fieldset

When working with multiple checkbox cards, it's important to understand the semantic difference between Field and Fieldset:

• Single CheckboxCard: Can be wrapped with Field.Root for proper form field structure with labels and helper text
• CheckboxGroup: Should be wrapped with Fieldset.Root, not Field.Root

A group of checkbox cards represents a collection of related options and should be marked up as a fieldset with a legend, not as a single field. Wrapping CheckboxGroup in Field.Root can cause interaction issues where only the first checkbox card responds to clicks.

✅ Correct Usage:

<Fieldset.Root>
  <CheckboxGroup name="framework">
    <Fieldset.Legend>Select framework(s)</Fieldset.Legend>
  </CheckboxGroup>
</Fieldset.Root>

❌ Incorrect Usage:

// Don't wrap CheckboxGroup with Field.Root
<Field.Root>
  <CheckboxGroup></CheckboxGroup>
</Field.Root>

Props

Root

Explorer

Explore the Checkbox Card component parts interactively. Click on parts in the sidebar to highlight them in the preview.