RadioCard

RadioCard is a component used for allowing users to select one option from multiple choices.

Import

import {
  RadioCard,
  RadioCardAddon,
  RadioCardDescription,
  RadioCardGroup,
  RadioCardLabel,
} from "@yamada-ui/react"

Copied!

RadioCardLabel, RadioCardDescription, and RadioCardAddon can be omitted.

Usage

Editable example

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

Copied!

Alternatively, you can omit RadioCard by setting items.

Editable example

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

return <RadioCardGroup items={items} />

Copied!

Change Variant

Editable example

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

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <RadioCardGroup
          key={variant}
          variant={variant}
          defaultValue="フローラ"
          items={items}
        />
      )}
    </For>
  </VStack>
)

Copied!

Change Size

Editable example

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

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <RadioCardGroup
          key={size}
          size={size}
          defaultValue="フローラ"
          items={items}
        />
      )}
    </For>
  </VStack>
)

Copied!

Change Color Scheme

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "subtle", "surface"]}>
      {(variant) => (
        <For key={variant} each={["secondary", "green"]}>
          {(colorScheme) => (
            <RadioCardGroup
              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 a value to defaultValue.

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return <RadioCardGroup defaultValue="フローラ" items={items} />

Copied!

Add Addon

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

Editable example

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

return <RadioCardGroup items={items} />

Copied!

Editable example

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

Copied!

Editable example

<RadioCardGroup>
  <RadioCard value="ビアンカ">
    <RadioCardLabel>ビアンカ</RadioCardLabel>
    <RadioCardDescription>
      パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>

  <RadioCard value="フローラ">
    <RadioCardLabel>フローラ</RadioCardLabel>
    <RadioCardDescription>
      大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>

  <RadioCard value="ルドマン">
    <RadioCardLabel>ルドマン</RadioCardLabel>
    <RadioCardDescription>
      なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
    </RadioCardDescription>
    <RadioCardAddon>ドラゴンクエストV 天空の花嫁（DQ5）</RadioCardAddon>
  </RadioCard>
</RadioCardGroup>

Copied!

Hide Icon

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

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      label: "ビアンカ",
      value: "ビアンカ",
      withIcon: false,
    },
    {
      label: "フローラ",
      value: "フローラ",
    },
    {
      label: "ルドマン",
      value: "ルドマン",
    },
  ],
  [],
)

return <RadioCardGroup items={items} />

Copied!

Editable example

<RadioCardGroup withIcon={false}>
  <RadioCard label="ビアンカ" value="ビアンカ" />
  <RadioCard label="フローラ" value="フローラ" />
  <RadioCard label="ルドマン" value="ルドマン" />
</RadioCardGroup>

Copied!

Disable

To disable, set isDisabled to true.

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isDisabled value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup isDisabled items={items} />

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

Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isReadOnly value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup isReadOnly items={items} />

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

Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return (
  <VStack>
    <RadioCardGroup defaultValue="ビアンカ">
      <RadioCard isInvalid value="ビアンカ">
        <RadioCardLabel>ビアンカ</RadioCardLabel>
        <RadioCardDescription>
          パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="フローラ">
        <RadioCardLabel>フローラ</RadioCardLabel>
        <RadioCardDescription>
          大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
        </RadioCardDescription>
      </RadioCard>

      <RadioCard value="ルドマン">
        <RadioCardLabel>ルドマン</RadioCardLabel>
        <RadioCardDescription>
          なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
        </RadioCardDescription>
      </RadioCard>
    </RadioCardGroup>

    <RadioCardGroup variant="surface" isInvalid items={items} />

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

Copied!

Customize Label

Editable example

const items = useMemo<RadioCardItem[]>(
  () => [
    {
      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 (
  <RadioCardGroup
    items={items}
    labelProps={{ flexDirection: "column", gap: "sm" }}
  />
)

Copied!

Editable example

<RadioCardGroup>
  <RadioCard
    description="This user can access the system"
    label={
      <VStack gap="sm">
        <ArrowRightIcon fontSize="2xl" />
        <Text>Arrow</Text>
      </VStack>
    }
    value="Arrow"
    labelProps={{
      alignItems: "start",
    }}
  />
  <RadioCard
    description="This user will be denied access to the system"
    label={
      <VStack gap="sm">
        <ShieldOffIcon fontSize="2xl" />
        <Text>Deny</Text>
      </VStack>
    }
    value="Deny"
    labelProps={{
      alignItems: "start",
    }}
  />
  <RadioCard
    description="This user will be locked out of the system"
    label={
      <VStack gap="sm">
        <LockIcon fontSize="2xl" />
        <Text>Lock</Text>
      </VStack>
    }
    value="Lock"
    labelProps={{
      alignItems: "start",
    }}
  />
</RadioCardGroup>

Copied!

Editable example

<RadioCardGroup w="fit-content" withIcon={false}>
  <RadioCard value="Rabbit">
    <RadioCardLabel>
      <HStack gap="sm">
        <RabbitIcon color="muted" fontSize="2xl" />
        <Text>Rabbit</Text>
      </HStack>
    </RadioCardLabel>
  </RadioCard>

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

  <RadioCard value="Squirrel">
    <RadioCardLabel>
      <HStack gap="sm">
        <SquirrelIcon color="muted" fontSize="2xl" />
        <Text>Squirrel</Text>
      </HStack>
    </RadioCardLabel>
  </RadioCard>
</RadioCardGroup>

Copied!

Control

Editable example

const [value, setValue] = useState<string>("フローラ")

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

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

Copied!

Use `React Hook Form`

Editable example

type Data = { radioCard: string[] }

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

const items = useMemo<RadioCardItem[]>(
  () => [
    { 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.radioCard}
      legend="Who is your favorite character?"
      errorMessage={errors.radioCard ? errors.radioCard.message : undefined}
    >
      <Controller
        name="radioCard"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => <RadioCardGroup {...field} items={items} />}
      />
    </Fieldset>

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

Copied!

Edit this page on GitHub

PreviousRadio NextCheckbox

RadioCard

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`