---
title: CheckboxCard
description: "`CheckboxCard` is a component used for allowing users to select multiple values from multiple options."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/checkbox-card
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-checkboxcard--basic
---

```tsx
<CheckboxCardGroup.Root>
  <CheckboxCardGroup.Item.Root value="1">
    <CheckboxCardGroup.Item.Label>ビアンカ</CheckboxCardGroup.Item.Label>
    <CheckboxCardGroup.Item.Description>
      パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
    </CheckboxCardGroup.Item.Description>
  </CheckboxCardGroup.Item.Root>
  <CheckboxCardGroup.Item.Root value="2">
    <CheckboxCardGroup.Item.Label>フローラ</CheckboxCardGroup.Item.Label>
    <CheckboxCardGroup.Item.Description>
      大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
    </CheckboxCardGroup.Item.Description>
  </CheckboxCardGroup.Item.Root>
  <CheckboxCardGroup.Item.Root value="3">
    <CheckboxCardGroup.Item.Label>ルドマン</CheckboxCardGroup.Item.Label>
    <CheckboxCardGroup.Item.Description>
      なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
    </CheckboxCardGroup.Item.Description>
  </CheckboxCardGroup.Item.Root>
</CheckboxCardGroup.Root>
```

## Usage

```tsx
import { CheckboxCard, CheckboxCardGroup } from "@yamada-ui/react"
```

```tsx
import { CheckboxCard, CheckboxCardGroup } from "@/components/ui"
```

```tsx
import { CheckboxCard, CheckboxCardGroup } from "@workspaces/ui"
```

```tsx
<CheckboxCardGroup.Root>
  <CheckboxCardGroup.Item.Root>
    <CheckboxCardGroup.Item.Label />
    <CheckboxCardGroup.Item.Description />
    <CheckboxCardGroup.Item.Addon />
  </CheckboxCardGroup.Item.Root>
</CheckboxCardGroup.Root>
```

### Use Items

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root items={items} />
```

### Change Variant

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    { label: "Checked", value: "1" },
    { label: "Unchecked", value: "2" },
  ],
  [],
)

return (
  <VStack>
    <For each={["subtle", "surface", "outline"]}>
      {(variant) => (
        <CheckboxCardGroup.Root
          key={variant}
          variant={variant}
          defaultValue={["1"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Change Size

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    { label: "Checked", value: "1" },
    { label: "Unchecked", value: "2" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <CheckboxCardGroup.Root
          key={size}
          size={size}
          defaultValue={["1"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Change Color Scheme

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    { label: "Checked", value: "1" },
    { label: "Unchecked", value: "2" },
  ],
  [],
)

return (
  <VStack>
    <For each={["success", "warning"]}>
      {(colorScheme) => (
        <CheckboxCardGroup.Root
          key={colorScheme}
          colorScheme={colorScheme}
          defaultValue={["1"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Set Default Value

To set a default value, set the value to `defaultValue`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root defaultValue={["1", "2"]} items={items} />
```

### Limit the Number of Selections

To limit the number of selections, set a number to `max`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root items={items} max={2} />
```

### Change Orientation

To change the orientation, set `orientation` to `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root items={items} orientation="vertical" />
```

### Change Shape

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["rounded", "square"]}>
      {(shape) => (
        <CheckboxCardGroup.Root
          key={shape}
          shape={shape}
          defaultValue={["1"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Change Alignment

To change the alignment, set `justify` to `"start"` or `"end"`, etc. By default, `"start"` is set.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["start", "end"]}>
      {(justify) => (
        <CheckboxCardGroup.Root
          key={justify}
          justify={justify}
          defaultValue={["1"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Add Addon

To add an addon, set `ReactNode` to `addon`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      addon: "ドラゴンクエストV 天空の花嫁",
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      addon: "ドラゴンクエストV 天空の花嫁",
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      addon: "ドラゴンクエストV 天空の花嫁",
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root items={items} orientation="vertical" />
```

### Hide Indicator

To hide the indicator, set `withIndicator` to `false`.

```tsx
<CheckboxCardGroup.Root withIndicator={false}>
  <CheckboxCardGroup.Item.Root flexDirection="row" gap="sm" value="1" w="auto">
    <RabbitIcon fontSize="2xl" />
    <Text as="span">ウサギ</Text>
  </CheckboxCardGroup.Item.Root>
  <CheckboxCardGroup.Item.Root flexDirection="row" gap="sm" value="2" w="auto">
    <SnailIcon fontSize="2xl" />
    <Text as="span">カタツムリ</Text>
  </CheckboxCardGroup.Item.Root>
  <CheckboxCardGroup.Item.Root flexDirection="row" gap="sm" value="3" w="auto">
    <SquirrelIcon fontSize="2xl" />
    <Text as="span">リス</Text>
  </CheckboxCardGroup.Item.Root>
</CheckboxCardGroup.Root>
```

### Disable

To disable, set `disabled` to `true`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["subtle", "surface", "outline"]}>
      {(variant) => (
        <CheckboxCardGroup.Root
          key={variant}
          variant={variant}
          defaultValue={["1"]}
          disabled
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Read-Only

To make read-only, set `readOnly` to `true`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["subtle", "surface", "outline"]}>
      {(variant) => (
        <CheckboxCardGroup.Root
          key={variant}
          variant={variant}
          defaultValue={["1"]}
          readOnly
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Invalid

To make the input invalid, set `invalid` to `true`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["subtle", "surface", "outline"]}>
      {(variant) => (
        <CheckboxCardGroup.Root
          key={variant}
          variant={variant}
          defaultValue={["1"]}
          invalid
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### Customize Border Color

To customize the border color, set a value to `focusBorderColor` or `errorBorderColor`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <VStack>
    <CheckboxCardGroup.Root focusBorderColor="green.500" items={items} />
    <CheckboxCardGroup.Root
      defaultValue={["1"]}
      errorBorderColor="orange.500"
      invalid
      items={items}
    />
  </VStack>
)
```

### Customize Icon

To customize the icon, set `ReactNode` to `checkedIcon`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return <CheckboxCardGroup.Root checkedIcon={<PlusIcon />} items={items} />
```

### Control

```tsx
const [value, setValue] = useState(["1"])
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    {
      description:
        "パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
      label: "ビアンカ",
      value: "1",
    },
    {
      description:
        "大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
      label: "フローラ",
      value: "2",
    },
    {
      description:
        "なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
      label: "ルドマン",
      value: "3",
    },
  ],
  [],
)

return (
  <CheckboxCardGroup.Root items={items} value={value} onChange={setValue} />
)
```

## Uses Components & Hooks

<Uses name="checkbox-card" />

## Props

### CheckboxCard.Root

| Prop                | Default     | Type                                                                                                                                                                        | Description                                                   |
| ------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| `as`                | -           | `As`                                                                                                                                                                        | The HTML element to render.                                   |
| `asChild`           | -           | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                    |
| `css`               | -           | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                               |
| `colorScheme`       | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                   |
| `size`              | `"md"`      | `"lg" \| "md" \| "sm" \| "xl"`                                                                                                                                              | The size of the component.                                    |
| `variant`           | `"surface"` | `"outline" \| "subtle" \| "surface"`                                                                                                                                        | The variant of the component.                                 |
| `addon`             | -           | `ReactNode`                                                                                                                                                                 | The addon of the checkbox card.                               |
| `addonProps`        | -           | `CheckboxCardAddonProps`                                                                                                                                                    | Props for the addon component.                                |
| `checked`           | -           | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be checked.                      |
| `checkedIcon`       | -           | `ReactNode`                                                                                                                                                                 | The icon to display in the checkbox when it is checked.       |
| `defaultChecked`    | `false`     | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be initially checked.            |
| `description`       | -           | `ReactNode`                                                                                                                                                                 | The description of the checkbox card.                         |
| `descriptionProps`  | -           | `CheckboxCardDescriptionProps`                                                                                                                                              | Props for the description component.                          |
| `disabled`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be disabled.                        |
| `errorBorderColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is invalid.                   |
| `focusBorderColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is focused.                   |
| `id`                | -           | `string`                                                                                                                                                                    | id assigned to input.                                         |
| `indeterminate`     | `false`     | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be indeterminate.                |
| `indeterminateIcon` | -           | `ReactNode`                                                                                                                                                                 | The icon to display in the checkbox when it is indeterminate. |
| `indicatorProps`    | -           | `CheckboxCardIndicatorProps`                                                                                                                                                | Props for the indicator component.                            |
| `inputProps`        | -           | `HTMLStyledProps<"input">`                                                                                                                                                  | Props for the input element.                                  |
| `invalid`           | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                         |
| `label`             | -           | `ReactNode`                                                                                                                                                                 | The label of the checkbox card.                               |
| `labelProps`        | -           | `CheckboxCardLabelProps`                                                                                                                                                    | Props for the label component.                                |
| `name`              | -           | `string`                                                                                                                                                                    | The name of the input field in a checkbox.                    |
| `onBlur`            | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the checkbox is blurred.            |
| `onChange`          | -           | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                      | The callback invoked when the checked state changes.          |
| `onFocus`           | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the checkbox is focused.            |
| `readOnly`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be readonly.                        |
| `required`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be required.                        |
| `rootProps`         | -           | `HTMLStyledProps<"label">`                                                                                                                                                  | Props for the label element.                                  |
| `value`             | -           | `Y`                                                                                                                                                                         | The value of the checkbox.                                    |
| `withIndicator`     | `true`      | `boolean`                                                                                                                                                                   | If `true`, the indicator will be displayed.                   |

### CheckboxCard.Addon

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### CheckboxCard.Description

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### CheckboxCard.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### CheckboxCardGroup.Root

| Prop               | Default     | Type                                                                                                                                                                        | Description                                                            |
| ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `as`               | -           | `As`                                                                                                                                                                        | The HTML element to render.                                            |
| `asChild`          | -           | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                             |
| `css`              | -           | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                                        |
| `colorScheme`      | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                            |
| `size`             | `"md"`      | `"lg" \| "md" \| "sm" \| "xl"`                                                                                                                                              | The size of the component.                                             |
| `variant`          | `"surface"` | `"outline" \| "subtle" \| "surface"`                                                                                                                                        | The variant of the component.                                          |
| `align`            | -           | `"-moz-initial" \| "anchor-center" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" ...`                              | The CSS `align-items` property.                                        |
| `basis`            | -           | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-auto" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" ...`                        | The CSS `flex-basis` property.                                         |
| `checkedIcon`      | -           | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`                | The icon to display in the checkbox when it is checked.                |
| `defaultValue`     | `[]`        | `Y[]`                                                                                                                                                                       | The initial value of the checkbox group.                               |
| `direction`        | -           | `"-moz-initial" \| "column-reverse" \| "column" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row-reverse" \| "row" \| "unset" ...`                           | The CSS `flex-direction` property.                                     |
| `disabled`         | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be disabled.                                 |
| `errorBorderColor` | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is invalid.                            |
| `focusBorderColor` | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is focused.                            |
| `invalid`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                                  |
| `items`            | `[]`        | `CheckboxCardGroupItem<Y>[]`                                                                                                                                                | If provided, generate options based on items.                          |
| `max`              | -           | `number`                                                                                                                                                                    | The maximum number of checkboxes that can be checked.                  |
| `onChange`         | -           | `(value: Y[]) => void`                                                                                                                                                      | The callback fired when any children checkbox is checked or unchecked. |
| `readOnly`         | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be readonly.                                 |
| `required`         | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be required.                                 |
| `shrink`           | -           | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`                                                                      | The CSS `flex-shrink` property.                                        |
| `value`            | -           | `Y[]`                                                                                                                                                                       | The value of the checkbox group.                                       |
| `withIndicator`    | `true`      | `boolean`                                                                                                                                                                   | If `true`, the indicator will be displayed.                            |
| `wrap`             | -           | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" ...`                                             | The CSS `flex-wrap` property.                                          |

### CheckboxCardGroup.Item.Root

| Prop                | Default     | Type                                                                                                                                                                        | Description                                                   |
| ------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| `as`                | -           | `As`                                                                                                                                                                        | The HTML element to render.                                   |
| `asChild`           | -           | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                    |
| `css`               | -           | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                               |
| `colorScheme`       | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                   |
| `size`              | `"md"`      | `"lg" \| "md" \| "sm" \| "xl"`                                                                                                                                              | The size of the component.                                    |
| `variant`           | `"surface"` | `"outline" \| "subtle" \| "surface"`                                                                                                                                        | The variant of the component.                                 |
| `addon`             | -           | `ReactNode`                                                                                                                                                                 | The addon of the checkbox card.                               |
| `addonProps`        | -           | `CheckboxCardAddonProps`                                                                                                                                                    | Props for the addon component.                                |
| `checked`           | -           | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be checked.                      |
| `checkedIcon`       | -           | `ReactNode`                                                                                                                                                                 | The icon to display in the checkbox when it is checked.       |
| `defaultChecked`    | `false`     | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be initially checked.            |
| `description`       | -           | `ReactNode`                                                                                                                                                                 | The description of the checkbox card.                         |
| `descriptionProps`  | -           | `CheckboxCardDescriptionProps`                                                                                                                                              | Props for the description component.                          |
| `disabled`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be disabled.                        |
| `errorBorderColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is invalid.                   |
| `focusBorderColor`  | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is focused.                   |
| `id`                | -           | `string`                                                                                                                                                                    | id assigned to input.                                         |
| `indeterminate`     | `false`     | `boolean`                                                                                                                                                                   | If `true`, the checkbox will be indeterminate.                |
| `indeterminateIcon` | -           | `ReactNode`                                                                                                                                                                 | The icon to display in the checkbox when it is indeterminate. |
| `indicatorProps`    | -           | `CheckboxCardIndicatorProps`                                                                                                                                                | Props for the indicator component.                            |
| `inputProps`        | -           | `HTMLStyledProps<"input">`                                                                                                                                                  | Props for the input element.                                  |
| `invalid`           | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                         |
| `label`             | -           | `ReactNode`                                                                                                                                                                 | The label of the checkbox card.                               |
| `labelProps`        | -           | `CheckboxCardLabelProps`                                                                                                                                                    | Props for the label component.                                |
| `name`              | -           | `string`                                                                                                                                                                    | The name of the input field in a checkbox.                    |
| `onBlur`            | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the checkbox is blurred.            |
| `onChange`          | -           | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                      | The callback invoked when the checked state changes.          |
| `onFocus`           | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the checkbox is focused.            |
| `readOnly`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be readonly.                        |
| `required`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be required.                        |
| `rootProps`         | -           | `HTMLStyledProps<"label">`                                                                                                                                                  | Props for the label element.                                  |
| `value`             | -           | `Y`                                                                                                                                                                         | The value of the checkbox.                                    |
| `withIndicator`     | `true`      | `boolean`                                                                                                                                                                   | If `true`, the indicator will be displayed.                   |

### CheckboxCardGroup.Item.Addon

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### CheckboxCardGroup.Item.Description

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### CheckboxCardGroup.Item.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

The `CheckboxCard` follows the [WAI-ARIA - Checkbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox) for accessibility.

If you are not using `Field.Root`, set `aria-label` or `aria-labelledby` to `CheckboxCardGroup.Root`.

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    { label: "ビアンカ", value: "1" },
    { label: "フローラ", value: "2" },
    { label: "ルドマン", value: "3" },
  ],
  [],
)

return <CheckboxCardGroup.Root aria-label="キャラクター" items={items} />
```

```tsx
const items = useMemo<CheckboxCardGroup.ItemType[]>(
  () => [
    { label: "ビアンカ", value: "1" },
    { label: "フローラ", value: "2" },
    { label: "ルドマン", value: "3" },
  ],
  [],
)

return (
  <VStack gap="sm">
    <Text as="h3" id="label">
      キャラクター
    </Text>

    <CheckboxCardGroup.Root aria-labelledby="label" items={items} />
  </VStack>
)
```

### Keyboard Navigation

| Key     | Description                                | State |
| ------- | ------------------------------------------ | ----- |
| `Space` | Toggles the checked state of the checkbox. | -     |

### ARIA Roles and Attributes

| Component                | Roles and Attributes | Usage                                                                                                                                                                          |
| ------------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `CheckboxCardGroup.Root` | `role="group"`       | Indicates that it's a group.                                                                                                                                                   |
|                          | `aria-labelledby`    | If `CheckboxCardGroup.Root` is within a `Field.Root` and `Field.Root` has a `label` or `Field.Label`, sets its `id`.                                                           |
|                          | `aria-describedby`   | If `CheckboxCardGroup.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. |
| `input`                  | `aria-checked`       | Sets to `"mixed"` if `indeterminate` is set, `"true"` if checked, and `"false"` if unchecked.                                                                                  |
|                          | `aria-disabled`      | Sets to `"true"` if `readOnly` is set, or if `max` is reached in a group.                                                                                                      |
|                          | `aria-invalid`       | Sets to `"true"` if `invalid` is set.                                                                                                                                          |
|                          | `aria-required`      | Sets to `"true"` if `required` is set.                                                                                                                                         |
| `CheckboxCardIndicator`  | `aria-hidden`        | Excludes the element from the accessibility tree.                                                                                                                              |