---
title: CheckboxCard
description: "`CheckboxCard`は、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。"
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
ドラえもん
22世紀の未来から来たネコ型ロボット。
ドラミ
ドラえもんの妹のロボット。
ガチャ子
アヒル型のロボット。
```
## 使い方
```tsx
import { CheckboxCard, CheckboxCardGroup } from "@yamada-ui/react"
```
```tsx
import { CheckboxCard, CheckboxCardGroup } from "@/components/ui"
```
```tsx
import { CheckboxCard, CheckboxCardGroup } from "@workspaces/ui"
```
```tsx
```
### itemsを使う
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return
```
### バリアントを変更する
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(variant) => (
)}
)
```
### サイズを変更する
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(size) => (
)}
)
```
### カラースキームを変更する
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(colorScheme) => (
)}
)
```
### デフォルトの値を設定する
デフォルトの値を設定する場合は、`defaultValue`に値を設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return
```
### 選択数を制限する
選択数を制限する場合は、`max`に数値を設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return
```
### 方向を変更する
方向を変更する場合は、`orientation`に`"horizontal"`または`"vertical"`を設定します。デフォルトでは、`"horizontal"`が設定されています。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return
```
### 形を変更する
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
{(shape) => (
)}
)
```
### 配置を変更する
配置を変更する場合は、`justify`に`"start"`または`"end"`などを設定します。デフォルトでは、`"start"`が設定されています。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
{(justify) => (
)}
)
```
### アドオンを追加する
アドオンを追加する場合は、`addon`に`ReactNode`を設定します。
```tsx
const items = useMemo(
() => [
{
addon: "藤子・F・不二雄",
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
addon: "藤子・F・不二雄",
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
addon: "藤子・F・不二雄",
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return
```
### インジケーターを非表示にする
インジケーターを非表示にする場合は、`withIndicator`を`false`に設定します。
```tsx
ウサギ
カタツムリ
リス
```
### 無効にする
無効にする場合は、`disabled`を`true`に設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### 読み取り専用にする
読み取り専用にする場合は、`readOnly`を`true`に設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### 無効な入力にする
無効な入力にする場合は、`invalid`を`true`に設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### ボーダーの色を変更する
ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
)
```
### アイコンをカスタマイズする
カスタムアイコンを使う場合は、`checkedIcon`に`ReactNode`を設定します。
```tsx
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return } items={items} />
```
### 制御する
```tsx
const [value, setValue] = useState(["1"])
const items = useMemo(
() => [
{
description: "22世紀の未来から来たネコ型ロボット。",
label: "ドラえもん",
value: "1",
},
{
description: "ドラえもんの妹のロボット。",
label: "ドラミ",
value: "2",
},
{
description: "アヒル型のロボット。",
label: "ガチャ子",
value: "3",
},
],
[],
)
return (
)
```
## 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. |
| `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `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` | The callback invoked when the checkbox is blurred. |
| `onChange` | - | `ChangeEventHandler` | The callback invoked when the checked state changes. |
| `onFocus` | - | `FocusEventHandler` | 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. |
| `shape` | `"circle"` | `"rounded" \| "square"` | The shape of the component |
| `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" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" \| "revert-layer" ...` | The CSS `align-items` property. |
| `attached` | `false` | `boolean` | If `true`, the borderRadius of button that are direct children will be altered to look flushed together. |
| `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> \| Iterable \| 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. |
| `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is focused. |
| `grow` | `false` | `boolean` | If `true`, the children will grow to fill the available space. |
| `invalid` | `false` | `boolean` | If `true`, the field will be invalid. |
| `items` | `[]` | `CheckboxCardItem[]` | If provided, generate options based on items. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `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. |
| `orientation` | `"horizontal"` | `"horizontal" \| "vertical"` | The orientation of the group. |
| `readOnly` | `false` | `boolean` | If `true`, the field will be readonly. |
| `required` | `false` | `boolean` | If `true`, the field will be required. |
| `shape` | `"circle"` | `"rounded" \| "square"` | The shape of the component |
| `shrink` | - | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` | The CSS `flex-shrink` property. |
| `stacking` | - | `"first-on-top" \| "last-on-top"` | The stacking order of the group. |
| `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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. |
| `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `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` | The callback invoked when the checkbox is blurred. |
| `onChange` | - | `ChangeEventHandler` | The callback invoked when the checked state changes. |
| `onFocus` | - | `FocusEventHandler` | 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. |
| `shape` | `"circle"` | `"rounded" \| "square"` | The shape of the component |
| `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. |
## アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。