Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

CheckboxCard

CheckboxCardは、ユーザーが複数の選択肢の中から複数の値を選択するための使用されるコンポーネントです。

ソース@yamada-ui/checkbox

インポート

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

使い方

編集可能な例

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

または、itemsを設定することでCheckboxCardを省略することができます。

編集可能な例

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

return <CheckboxCardGroup items={items} />
Copied!

バリアントを変更する

編集可能な例

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!

サイズを変更する

編集可能な例

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!

カラースキーマを変更する

編集可能な例

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!

デフォルトで選択された状態にする

デフォルトで選択された状態にする場合は、defaultValueに配列を設定します。

編集可能な例

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

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

アドオンを追加する

アドオンを追加する場合は、addonにReactNodeを設定するか、CheckboxCardAddonコンポーネントを使用します。

編集可能な例

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!

編集可能な例

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

編集可能な例

<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!

アイコンを非表示にする

アイコンを非表示にする場合は、CheckboxCardGroupまたはCheckboxCardのwithIconをfalseに設定します。デフォルトは、trueです。

編集可能な例

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

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

編集可能な例

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

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!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

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!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

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!

ラベルをカスタマイズする

編集可能な例

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!

編集可能な例

<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!

編集可能な例

<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!

制御する

編集可能な例

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

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

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

React Hook Formを使う

編集可能な例

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!

GitHubでこのページを編集する

前Checkbox次Switch