CheckboxCard

CheckboxCard is a component used for allowing users to select multiple values from multiple options.

Import

import {
  CheckboxCard,
  CheckboxCardAddon,
  CheckboxCardDescription,
  CheckboxCardGroup,
  CheckboxCardLabel,
} from "@yamada-ui/react"

Copied!

CheckboxCardLabel, CheckboxCardDescription, and CheckboxCardAddon can be omitted.

Usage

Editable example

<CheckboxCardGroup>
  <CheckboxCard
    description="22世紀の未来から来たネコ型ロボット。"
    label="ドラえもん"
    value="ドラえもん"
  />
  <CheckboxCard
    description="ドラえもんの妹のロボット。"
    label="ドラミ"
    value="ドラミ"
  />
  <CheckboxCard
    description="アヒル型のロボット。"
    label="ガチャ子"
    value="ガチャ子"
  />
</CheckboxCardGroup>

Copied!

Alternatively, you can omit CheckboxCard by setting items.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      description: "22世紀の未来から来たネコ型ロボット。",
      label: "ドラえもん",
      value: "ドラえもん",
    },
    {
      description: "ドラえもんの妹のロボット。",
      label: "ドラミ",
      value: "ドラミ",
    },
    {
      description: "アヒル型のロボット。",
      label: "ガチャ子",
      value: "ガチャ子",
    },
  ],
  [],
)

return <CheckboxCardGroup items={items} />

Copied!

Change Variant

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      description: "22世紀の未来から来たネコ型ロボット。",
      label: "ドラえもん",
      value: "ドラえもん",
    },
    {
      description: "ドラえもんの妹のロボット。",
      label: "ドラミ",
      value: "ドラミ",
    },
    {
      description: "アヒル型のロボット。",
      label: "ガチャ子",
      value: "ガチャ子",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <CheckboxCardGroup
          key={variant}
          variant={variant}
          defaultValue={["ドラえもん"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)

Copied!

Change Size

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      description: "22世紀の未来から来たネコ型ロボット。",
      label: "ドラえもん",
      value: "ドラえもん",
    },
    {
      description: "ドラえもんの妹のロボット。",
      label: "ドラミ",
      value: "ドラミ",
    },
    {
      description: "アヒル型のロボット。",
      label: "ガチャ子",
      value: "ガチャ子",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <CheckboxCardGroup
          key={size}
          size={size}
          defaultValue={["ドラえもん"]}
          items={items}
        />
      )}
    </For>
  </VStack>
)

Copied!

Change Color Scheme

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <For key={variant} each={["secondary", "green"]}>
          {(colorScheme) => (
            <CheckboxCardGroup
              key={colorScheme}
              colorScheme={colorScheme}
              variant={variant}
              defaultValue={["ドラえもん"]}
              items={items}
            />
          )}
        </For>
      )}
    </For>
  </VStack>
)

Copied!

Set as Selected by Default

To set the default checked state, set an array to defaultValue.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return <CheckboxCardGroup defaultValue={["ドラえもん"]} items={items} />

Copied!

Add Addon

To add an addon, set a ReactNode to addon, or use the CheckboxCardAddon component.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      addon: "藤子・F・不二雄",
      description: "22世紀の未来から来たネコ型ロボット。",
      label: "ドラえもん",
      value: "ドラえもん",
    },
    {
      addon: "藤子・F・不二雄",
      description: "ドラえもんの妹のロボット。",
      label: "ドラミ",
      value: "ドラミ",
    },
    {
      addon: "藤子・F・不二雄",
      description: "アヒル型のロボット。",
      label: "ガチャ子",
      value: "ガチャ子",
    },
  ],
  [],
)

return <CheckboxCardGroup defaultValue={["ドラえもん"]} items={items} />

Copied!

Editable example

<CheckboxCardGroup defaultValue={["ドラえもん"]}>
  <CheckboxCard
    addon="藤子・F・不二雄"
    description="22世紀の未来から来たネコ型ロボット。"
    label="ドラえもん"
    value="ドラえもん"
  />
  <CheckboxCard
    addon="藤子・F・不二雄"
    description="ドラえもんの妹のロボット。"
    label="ドラミ"
    value="ドラミ"
  />
  <CheckboxCard
    addon="藤子・F・不二雄"
    description="アヒル型のロボット。"
    label="ガチャ子"
    value="ガチャ子"
  />
</CheckboxCardGroup>

Copied!

Editable example

<CheckboxCardGroup defaultValue={["ドラえもん"]}>
  <CheckboxCard value="ドラえもん">
    <CheckboxCardLabel>ドラえもん</CheckboxCardLabel>
    <CheckboxCardDescription>
      22世紀の未来から来たネコ型ロボット。
    </CheckboxCardDescription>
    <CheckboxCardAddon>藤子・F・不二雄</CheckboxCardAddon>
  </CheckboxCard>

  <CheckboxCard value="ドラミ">
    <CheckboxCardLabel>ドラミ</CheckboxCardLabel>
    <CheckboxCardDescription>
      ドラえもんの妹のロボット。
    </CheckboxCardDescription>
    <CheckboxCardAddon>藤子・F・不二雄</CheckboxCardAddon>
  </CheckboxCard>

  <CheckboxCard value="ガチャ子">
    <CheckboxCardLabel>ガチャ子</CheckboxCardLabel>
    <CheckboxCardDescription>アヒル型のロボット。</CheckboxCardDescription>
    <CheckboxCardAddon>藤子・F・不二雄</CheckboxCardAddon>
  </CheckboxCard>
</CheckboxCardGroup>

Copied!

Hide Icon

To hide the icon, set withIcon to false on either CheckboxCardGroup or CheckboxCard. The default is true.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      label: "ドラえもん",
      value: "ドラえもん",
      withIcon: false,
    },
    {
      label: "ドラミ",
      value: "ドラミ",
    },
    {
      label: "ガチャ子",
      value: "ガチャ子",
    },
  ],
  [],
)

return <CheckboxCardGroup defaultValue={["ドラえもん"]} items={items} />

Copied!

Editable example

<CheckboxCardGroup defaultValue={["ドラえもん"]} withIcon={false}>
  <CheckboxCard label="ドラえもん" value="ドラえもん" />
  <CheckboxCard label="ドラミ" value="ドラミ" />
  <CheckboxCard label="ガチャ子" value="ガチャ子" />
</CheckboxCardGroup>

Copied!

Disable

To disable, set isDisabled to true.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return (
  <VStack>
    <CheckboxCardGroup defaultValue={["ドラえもん"]}>
      <CheckboxCard value="ドラえもん">
        <CheckboxCardLabel>ドラえもん</CheckboxCardLabel>
        <CheckboxCardDescription>
          22世紀の未来から来たネコ型ロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard isDisabled value="ドラミ">
        <CheckboxCardLabel>ドラミ</CheckboxCardLabel>
        <CheckboxCardDescription>
          ドラえもんの妹のロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard value="ガチャ子">
        <CheckboxCardLabel>ガチャ子</CheckboxCardLabel>
        <CheckboxCardDescription>アヒル型のロボット。</CheckboxCardDescription>
      </CheckboxCard>
    </CheckboxCardGroup>

    <CheckboxCardGroup isDisabled items={items} />

    <Fieldset isDisabled legend="Which characters would you like to select?">
      <CheckboxCardGroup items={items} />
    </Fieldset>
  </VStack>
)

Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return (
  <VStack>
    <CheckboxCardGroup defaultValue={["ドラえもん"]}>
      <CheckboxCard value="ドラえもん">
        <CheckboxCardLabel>ドラえもん</CheckboxCardLabel>
        <CheckboxCardDescription>
          22世紀の未来から来たネコ型ロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard isReadOnly value="ドラミ">
        <CheckboxCardLabel>ドラミ</CheckboxCardLabel>
        <CheckboxCardDescription>
          ドラえもんの妹のロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard value="ガチャ子">
        <CheckboxCardLabel>ガチャ子</CheckboxCardLabel>
        <CheckboxCardDescription>アヒル型のロボット。</CheckboxCardDescription>
      </CheckboxCard>
    </CheckboxCardGroup>

    <CheckboxCardGroup isReadOnly items={items} />

    <Fieldset isReadOnly legend="Which characters would you like to select?">
      <CheckboxCardGroup items={items} />
    </Fieldset>
  </VStack>
)

Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return (
  <VStack>
    <CheckboxCardGroup defaultValue={["ドラえもん"]}>
      <CheckboxCard isInvalid value="ドラえもん">
        <CheckboxCardLabel>ドラえもん</CheckboxCardLabel>
        <CheckboxCardDescription>
          22世紀の未来から来たネコ型ロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard value="ドラミ">
        <CheckboxCardLabel>ドラミ</CheckboxCardLabel>
        <CheckboxCardDescription>
          ドラえもんの妹のロボット。
        </CheckboxCardDescription>
      </CheckboxCard>

      <CheckboxCard value="ガチャ子">
        <CheckboxCardLabel>ガチャ子</CheckboxCardLabel>
        <CheckboxCardDescription>アヒル型のロボット。</CheckboxCardDescription>
      </CheckboxCard>
    </CheckboxCardGroup>

    <CheckboxCardGroup isInvalid items={items} />

    <Fieldset
      errorMessage="This is required."
      isInvalid
      legend="Which characters would you like to select?"
    >
      <CheckboxCardGroup items={items} />
    </Fieldset>
  </VStack>
)

Copied!

Customize Label

Editable example

const items = useMemo<CheckboxCardItem[]>(
  () => [
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartLineIcon color="muted" fontSize="3xl" />
          <Text>Line Chart</Text>
        </VStack>
      ),
      value: "Line Chart",
    },
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartColumnIcon color="muted" fontSize="3xl" />
          <Text>Bar Chart</Text>
        </VStack>
      ),
      value: "Bar Chart",
    },
    {
      label: (
        <VStack alignItems="center" gap="sm">
          <ChartAreaIcon color="muted" fontSize="3xl" />
          <Text>Area Chart</Text>
        </VStack>
      ),
      value: "Area Chart",
    },
  ],
  [],
)

return (
  <CheckboxCardGroup
    defaultValue={["Line Chart"]}
    items={items}
    labelProps={{ flexDirection: "column", gap: "sm" }}
  />
)

Copied!

Editable example

<CheckboxCardGroup defaultValue={["Admin"]}>
  <CheckboxCard
    description="Give full access to the system"
    label={
      <VStack gap="sm">
        <ShieldCheckIcon fontSize="2xl" />
        <Text>Admin</Text>
      </VStack>
    }
    value="Admin"
    labelProps={{
      alignItems: "start",
    }}
  />
  <CheckboxCard
    description="Give limited access to the system"
    label={
      <VStack gap="sm">
        <UserRoundIcon fontSize="2xl" />
        <Text>User</Text>
      </VStack>
    }
    value="User"
    labelProps={{
      alignItems: "start",
    }}
  />
  <CheckboxCard
    description="No access to the system"
    label={
      <VStack gap="sm">
        <LockIcon fontSize="2xl" />
        <Text>Blocked</Text>
      </VStack>
    }
    value="Blocked"
    labelProps={{
      alignItems: "start",
    }}
  />
</CheckboxCardGroup>

Copied!

Editable example

<CheckboxCardGroup defaultValue={["Rabbit"]} w="fit-content" withIcon={false}>
  <CheckboxCard value="Rabbit">
    <CheckboxCardLabel>
      <HStack gap="sm">
        <RabbitIcon color="muted" fontSize="2xl" />
        <Text>Rabbit</Text>
      </HStack>
    </CheckboxCardLabel>
  </CheckboxCard>

  <CheckboxCard value="Snail">
    <HStack gap="sm">
      <SnailIcon color="muted" fontSize="2xl" />
      <Text>Snail</Text>
    </HStack>
  </CheckboxCard>

  <CheckboxCard value="Squirrel">
    <CheckboxCardLabel>
      <HStack gap="sm">
        <SquirrelIcon color="muted" fontSize="2xl" />
        <Text>Squirrel</Text>
      </HStack>
    </CheckboxCardLabel>
  </CheckboxCard>
</CheckboxCardGroup>

Copied!

Control

Editable example

const [value, setValue] = useState<string[]>(["ドラえもん"])

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

return <CheckboxCardGroup items={items} value={value} onChange={setValue} />

Copied!

Use `React Hook Form`

Editable example

type Data = { checkboxCard: string[] }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const items = useMemo<CheckboxCardItem[]>(
  () => [
    { label: "ドラえもん", value: "ドラえもん" },
    { label: "ドラミ", value: "ドラミ" },
    { label: "ガチャ子", value: "ガチャ子" },
  ],
  [],
)

const onSubmit = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Fieldset
      isInvalid={!!errors.checkboxCard}
      legend="Who is your favorite character?"
      errorMessage={
        errors.checkboxCard ? errors.checkboxCard.message : undefined
      }
    >
      <Controller
        name="checkboxCard"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => <CheckboxCardGroup {...field} items={items} />}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)

Copied!

Edit this page on GitHub

PreviousCheckbox NextSwitch

CheckboxCard

Usage

Change Variant

Change Size

Change Color Scheme

Set as Selected by Default

Add Addon

Hide Icon

Disable

Make Read-Only

Make Input Invalid

Customize Label

Control

Use React Hook Form

Use `React Hook Form`