Checkbox Card
Used to select or deselect options displayed within cards.
import { CheckboxCard } from "@chakra-ui/react" const Demo = () => { return ( <CheckboxCard.Root maxW="240px"> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Label>Next.js</CheckboxCard.Label> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> ) } 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>Examples
Description
Use the CheckboxCard.Description component to add a description to the checkbox card.
import { CheckboxCard } from "@chakra-ui/react" const Demo = () => { return ( <CheckboxCard.Root maxW="240px"> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>Next.js</CheckboxCard.Label> <CheckboxCard.Description>Best for apps</CheckboxCard.Description> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> ) } Group
Use the CheckboxGroup component to group multiple checkbox cards.
Select framework(s)
import { CheckboxCard, CheckboxGroup, Flex, Text } from "@chakra-ui/react" const Demo = () => { return ( <CheckboxGroup defaultValue={["next"]}> <Text textStyle="sm" fontWeight="medium"> Select framework(s) </Text> <Flex gap="2"> {items.map((item) => ( <CheckboxCard.Root key={item.value} value={item.value}> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>{item.title}</CheckboxCard.Label> <CheckboxCard.Description> {item.description} </CheckboxCard.Description> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> ))} </Flex> </CheckboxGroup> ) } const items = [ { value: "next", title: "Next.js", description: "Best for apps" }, { value: "vite", title: "Vite", description: "Best for SPAs" }, { value: "astro", title: "Astro", description: "Best for static sites" }, ] Sizes
Pass the size prop to the CheckboxCard.Root component to change the size of the checkbox card.
import { CheckboxCard, For, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack maxW="320px"> <For each={["sm", "md", "lg"]}> {(size) => ( <CheckboxCard.Root size={size} key={size}> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>Checkbox {size}</CheckboxCard.Label> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> )} </For> </Stack> ) } Variants
Use the variant prop to Pass the variant prop to the CheckboxCard.Root component to change the variant of the checkbox card.
import { CheckboxCard, For, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack maxW="320px"> <For each={["subtle", "surface", "outline"]}> {(variant) => ( <CheckboxCard.Root defaultChecked key={variant} variant={variant} colorPalette="teal" > <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Label>Checkbox {variant}</CheckboxCard.Label> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> )} </For> </Stack> ) } Disabled
Pass the disabled prop to the CheckboxCard.Root component to make the checkbox card disabled.
import { CheckboxCard } from "@chakra-ui/react" const Demo = () => { return ( <CheckboxCard.Root disabled maxW="320px"> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>Disabled</CheckboxCard.Label> <CheckboxCard.Description> This is a disabled checkbox </CheckboxCard.Description> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> </CheckboxCard.Root> ) } Addon
Render additional content within the CheckboxCard.Addon component to add some more context to the checkbox card.
import { Badge, CheckboxCard, HStack } from "@chakra-ui/react" const Demo = () => { return ( <CheckboxCard.Root maxW="300px"> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <CheckboxCard.Label>With Addon</CheckboxCard.Label> <CheckboxCard.Description>Some description</CheckboxCard.Description> </CheckboxCard.Content> <CheckboxCard.Indicator /> </CheckboxCard.Control> <CheckboxCard.Addon> <HStack> Some supporting text <Badge variant="solid">New</Badge> </HStack> </CheckboxCard.Addon> </CheckboxCard.Root> ) } No Indicator
Here's an example of how to use the checkbox card without an indicator.
import { CheckboxCard, HStack } from "@chakra-ui/react" const Demo = () => { return ( <HStack> <CheckboxCard.Root> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Label>Chakra UI</CheckboxCard.Label> </CheckboxCard.Control> </CheckboxCard.Root> <CheckboxCard.Root> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Label>Next.js</CheckboxCard.Label> </CheckboxCard.Control> </CheckboxCard.Root> </HStack> ) } Icon
Here's an example of how to render custom icons within the checkbox card.
import { CheckboxCard, CheckboxGroup, Float, Icon, SimpleGrid, } from "@chakra-ui/react" import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from "react-icons/hi" const Demo = () => { return ( <CheckboxGroup defaultValue={["Guest"]}> <SimpleGrid minChildWidth="200px" gap="2"> {items.map((item) => ( <CheckboxCard.Root align="center" key={item.label}> <CheckboxCard.HiddenInput /> <CheckboxCard.Control> <CheckboxCard.Content> <Icon fontSize="2xl" mb="2"> {item.icon} </Icon> <CheckboxCard.Label>{item.label}</CheckboxCard.Label> <CheckboxCard.Description> {item.description} </CheckboxCard.Description> </CheckboxCard.Content> <Float placement="top-end" offset="6"> <CheckboxCard.Indicator /> </Float> </CheckboxCard.Control> </CheckboxCard.Root> ))} </SimpleGrid> </CheckboxGroup> ) } const items = [ { icon: <HiShieldCheck />, label: "Admin", description: "Give full access" }, { icon: <HiUser />, label: "User", description: "Give limited access" }, { icon: <HiGlobeAlt />, label: "Guest", description: "Give read-only access", }, { icon: <HiLockClosed />, label: "Blocked", description: "No access" }, ] Closed Component
Here's how to setup the Checkbox card for a closed component composition.
import { CheckboxCard as ChakraCheckboxCard } from "@chakra-ui/react" import * as React from "react" export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps { icon?: React.ReactElement label?: React.ReactNode description?: React.ReactNode addon?: React.ReactNode indicator?: React.ReactNode | null indicatorPlacement?: "start" | "end" | "inside" inputProps?: React.InputHTMLAttributes<HTMLInputElement> } export const CheckboxCard = React.forwardRef< HTMLInputElement, CheckboxCardProps >(function CheckboxCard(props, ref) { const { inputProps, label, description, icon, addon, indicator = <ChakraCheckboxCard.Indicator />, indicatorPlacement = "end", ...rest } = props const hasContent = label || description || icon const ContentWrapper = indicator ? ChakraCheckboxCard.Content : React.Fragment return ( <ChakraCheckboxCard.Root {...rest}> <ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} /> <ChakraCheckboxCard.Control> {indicatorPlacement === "start" && indicator} {hasContent && ( <ContentWrapper> {icon} {label && ( <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label> )} {description && ( <ChakraCheckboxCard.Description> {description} </ChakraCheckboxCard.Description> )} {indicatorPlacement === "inside" && indicator} </ContentWrapper> )} {indicatorPlacement === "end" && indicator} </ChakraCheckboxCard.Control> {addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>} </ChakraCheckboxCard.Root> ) }) export const CheckboxCardIndicator = ChakraCheckboxCard.Indicator If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add checkbox-cardHere's how to use the it
<CheckboxCard label="Checkbox Card" />Props
Root
| Prop | Default | Type |
|---|---|---|
value | '\'on\'' | stringThe value of checkbox input. Useful for form submission. |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
variant | 'outline' | 'surface' | 'subtle' | 'outline' | 'solid'The variant of the component |
align | 'start' | 'start' | 'end' | 'center'The align of the component |
orientation | 'horizontal' | 'vertical' | 'horizontal'The orientation of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
checked | CheckedStateThe controlled checked state of the checkbox | |
defaultChecked | CheckedStateThe initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. | |
disabled | booleanWhether the checkbox is disabled | |
form | stringThe id of the form that the checkbox belongs to. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; hiddenInput: string; control: string; label: string }>The ids of the elements in the checkbox. Useful for composition. | |
invalid | booleanWhether the checkbox is invalid | |
name | stringThe name of the input field in a checkbox. Useful for form submission. | |
onCheckedChange | (details: CheckedChangeDetails) => voidThe callback invoked when the checked state changes. | |
readOnly | booleanWhether the checkbox is read-only | |
required | booleanWhether the checkbox is required | |
justify | 'start' | 'end' | 'center'The justify of the component |
Explorer
Explore the Checkbox Card component parts interactively. Click on parts in the sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
control
label
description
addon
indicator
content
checkbox-card.recipe.ts