---
title: RadioCard
description: "`RadioCard` is a component used for allowing users to select one option from multiple choices."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/radio-card
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-radiocard--basic
---

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

## Usage

```tsx
import { RadioCard, RadioCardGroup } from "@yamada-ui/react"
```

```tsx
import { RadioCard, RadioCardGroup } from "@/components/ui"
```

```tsx
import { RadioCard, RadioCardGroup } from "@workspaces/ui"
```

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

### Using items

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

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

### Change Variant

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

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

### Change Size

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

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

### Change Color Scheme

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

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

### Set Default Value

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

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

return <RadioCardGroup.Root defaultValue="2" items={items} />
```

### Change Orientation

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

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

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

### Change Shape

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

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

### Change Alignment

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

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

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

### Add Addon

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

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

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

### Hide Indicator

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

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

### Disable

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

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

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

    <Field.Root disabled label="Who is your favorite character?">
      <RadioCardGroup.Root defaultValue="2" items={items} />
    </Field.Root>
  </VStack>
)
```

### Read-Only

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

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

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

    <Field.Root label="Who is your favorite character?" readOnly>
      <RadioCardGroup.Root defaultValue="2" items={items} />
    </Field.Root>
  </VStack>
)
```

### Invalid

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

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

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

    <Field.Root invalid label="Who is your favorite character?">
      <RadioCardGroup.Root defaultValue="2" items={items} />
    </Field.Root>
  </VStack>
)
```

### Customize Border Color

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

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

return (
  <VStack>
    <RadioCardGroup.Root focusBorderColor="green.500" items={items} />
    <RadioCardGroup.Root
      defaultValue="2"
      errorBorderColor="orange.500"
      invalid
      items={items}
    />
  </VStack>
)
```

### Control

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

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

## Uses Components & Hooks

<Uses name="radio-card" />

## Props

### RadioCard.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 radio card.                         |
| `addonProps`       | -           | `RadioCardAddonProps`                                                                                                                                                       | Props for the addon component.                       |
| `checked`          | -           | `boolean`                                                                                                                                                                   | If `true`, the radio will be checked.                |
| `defaultChecked`   | `false`     | `boolean`                                                                                                                                                                   | If `true`, the radio will be initially checked.      |
| `description`      | -           | `ReactNode`                                                                                                                                                                 | The description of the radio card.                   |
| `descriptionProps` | -           | `RadioCardDescriptionProps`                                                                                                                                                 | 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.                                |
| `indicatorProps`   | -           | `RadioCardIndicatorProps`                                                                                                                                                   | 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 radio card.                         |
| `labelProps`       | -           | `RadioCardLabelProps`                                                                                                                                                       | Props for the label component.                       |
| `name`             | -           | `string`                                                                                                                                                                    | The name of the input field in a radio.              |
| `onBlur`           | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the radio is blurred.      |
| `onChange`         | -           | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                      | The callback invoked when the checked state changes. |
| `onFocus`          | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the radio 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 radio.                              |
| `withIndicator`    | `true`      | `boolean`                                                                                                                                                                   | If `true`, the indicator will be displayed.          |

### RadioCard.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.                |

### RadioCard.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.                |

### RadioCard.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.                |

### RadioCardGroup.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.                                      |
| `defaultValue`     | -           | `Y`                                                                                                                                                                         | The initial value of the radio 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`            | `[]`        | `RadioCardGroupItem<Y>[]`                                                                                                                                                   | If provided, generate options based on items.                       |
| `onChange`         | -           | `(value: Y) => void`                                                                                                                                                        | The callback fired when any children radio 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 radio 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.                                       |

### RadioCardGroup.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 radio card.                         |
| `addonProps`       | -           | `RadioCardAddonProps`                                                                                                                                                       | Props for the addon component.                       |
| `checked`          | -           | `boolean`                                                                                                                                                                   | If `true`, the radio will be checked.                |
| `defaultChecked`   | `false`     | `boolean`                                                                                                                                                                   | If `true`, the radio will be initially checked.      |
| `description`      | -           | `ReactNode`                                                                                                                                                                 | The description of the radio card.                   |
| `descriptionProps` | -           | `RadioCardDescriptionProps`                                                                                                                                                 | 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.                                |
| `indicatorProps`   | -           | `RadioCardIndicatorProps`                                                                                                                                                   | 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 radio card.                         |
| `labelProps`       | -           | `RadioCardLabelProps`                                                                                                                                                       | Props for the label component.                       |
| `name`             | -           | `string`                                                                                                                                                                    | The name of the input field in a radio.              |
| `onBlur`           | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the radio is blurred.      |
| `onChange`         | -           | `ChangeEventHandler<HTMLInputElement>`                                                                                                                                      | The callback invoked when the checked state changes. |
| `onFocus`          | -           | `FocusEventHandler<HTMLInputElement>`                                                                                                                                       | The callback invoked when the radio 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 radio.                              |
| `withIndicator`    | `true`      | `boolean`                                                                                                                                                                   | If `true`, the indicator will be displayed.          |

### RadioCardGroup.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.                |

### RadioCardGroup.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.                |

### RadioCardGroup.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 `RadioCard` follows the [WAI-ARIA - Radio Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio) for accessibility.

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

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

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

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

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

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

### Keyboard Navigation

| Key          | Description                                                                                                                           | State |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| `Tab`        | Moves focus to the checked radio button within the radio group. If no radio button is checked, moves focus to the first radio button. | -     |
| `Space`      | Checks the focused radio button.                                                                                                      | -     |
| `ArrowLeft`  | Checks the previous enabled radio button.                                                                                             | -     |
| `ArrowRight` | Checks the next enabled radio button.                                                                                                 | -     |
| `ArrowUp`    | Checks the previous enabled radio button.                                                                                             | -     |
| `ArrowDown`  | Checks the next enabled radio button.                                                                                                 | -     |

### ARIA Roles and Attributes

| Component                                    | Role and Attribute  | Usage                                                                                                                                                                                                |
| -------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `RadioCardGroup.Root`                        | `role="radiogroup"` | Indicates that this is a radio group.                                                                                                                                                                |
|                                              | `aria-labelledby`   | If `RadioCardGroup.Root` is within a `Field.Root` and `Field.Root` has a `label` or `Field.Label`, set its `id`.                                                                                     |
|                                              | `aria-describedby`  | If `RadioCardGroup.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.                          |
| `RadioCard.Root`, `RadioCardGroup.Item.Root` | `aria-checked`      | Sets to `"true"` if the radio button is checked, and `"false"` if it is not checked.                                                                                                                 |
|                                              | `aria-describedby`  | If `RadioCard.Root` or `RadioCardGroup.Item.Root` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. |
|                                              | `aria-disabled`     | Sets to `"true"` if `disabled` or `readOnly` is set.                                                                                                                                                 |
|                                              | `aria-invalid`      | Sets to `"true"` if `invalid` is set.                                                                                                                                                                |
|                                              | `aria-required`     | Sets to `"true"` if `required` is set.                                                                                                                                                               |
| `RadioIndicator`                             | `aria-hidden`       | Excludes the element from the accessibility tree.                                                                                                                                                    |