Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Checkbox Card

Used to select or deselect options displayed within cards.

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the checkbox-card snippet

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

The snippet includes a closed component composition for the CheckboxCard component.

Usage

import { CheckboxCard } from "@/components/ui/checkbox-card"
<CheckboxCard label="Checkbox Card" />

Examples

Group

Use the CheckboxCardGroup component to group multiple checkbox cards.

Select framework(s)

Sizes

Use the size prop to change the size of the checkbox card.

Variants

Use the variant prop to change the variant of the checkbox card.

Disabled

Use the disabled prop to make the checkbox card disabled.

Addon

Use the CheckboxCardAddon to add some more context to the checkbox card.

Icon

Render custom icons within the checkbox card.

Without Snippet

If you don't want to use the snippet, you can use the CheckboxCard component from the @chakra-ui/react package.

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'sm' | 'md' | 'lg'

The size of the component

variant 'outline'
'plain' | 'subtle' | 'outline'

The variant of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

Card

Next

Checkbox