---
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
ビアンカ
パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。
フローラ
大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。
ルドマン
なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。
```
## Usage
```tsx
import { RadioCard, RadioCardGroup } from "@yamada-ui/react"
```
```tsx
import { RadioCard, RadioCardGroup } from "@/components/ui"
```
```tsx
import { RadioCard, RadioCardGroup } from "@workspaces/ui"
```
```tsx
```
### Using items
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return
```
### Change Variant
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(variant) => (
)}
)
```
### Change Size
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(size) => (
)}
)
```
### Change Color Scheme
```tsx
const items = useMemo(
() => [
{ label: "Checked", value: "1" },
{ label: "Unchecked", value: "2" },
],
[],
)
return (
{(colorScheme) => (
)}
)
```
### Set Default Value
To set a default value, set a value to `defaultValue`.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return
```
### Change Orientation
To change the orientation, set `orientation` to `"horizontal"` or `"vertical"`. By default, `"horizontal"` is set.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return
```
### Change Shape
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
{(shape) => (
)}
)
```
### Change Alignment
To change the alignment, set `justify` to `"start"`, `"center"`, or `"end"`. By default, `"start"` is set.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
{(justify) => (
)}
)
```
### Add Addon
To add an addon, set `ReactNode` to `addon`.
```tsx
const items = useMemo(
() => [
{
addon: "ドラゴンクエストV 天空の花嫁",
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
addon: "ドラゴンクエストV 天空の花嫁",
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
addon: "ドラゴンクエストV 天空の花嫁",
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return
```
### Hide Indicator
To hide the indicator, set `withIndicator` to `false`.
```tsx
ウサギ
カタツムリ
リス
```
### Disable
To disable, set `disabled` to `true`.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### Read-Only
To make read-only, set `readOnly` to `true`.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### Invalid
To make invalid, set `invalid` to `true`.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
{(variant) => (
)}
)
```
### Customize Border Color
To customize the border color, set a color to `focusBorderColor` or `errorBorderColor`.
```tsx
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return (
)
```
### Control
```tsx
const [value, setValue] = useState("2")
const items = useMemo(
() => [
{
description:
"パパスの息子より、ふたつ年上のしっかり者の幼なじみ。彼と一緒に、レヌール城のお化け退治に繰り出した。",
label: "ビアンカ",
value: "1",
},
{
description:
"大富豪ルドマンの娘で、デボラの妹。ちょっぴり天然なところもある、清楚で可憐なお嬢様。",
label: "フローラ",
value: "2",
},
{
description:
"なんと、この私が、好きと申すか！？そ、それはいかん！もう１度、考えてみなさい。",
label: "ルドマン",
value: "3",
},
],
[],
)
return
```
## 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" \| "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. |
| `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. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `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` | The callback invoked when the radio is blurred. |
| `onChange` | - | `ChangeEventHandler` | The callback invoked when the checked state changes. |
| `onFocus` | - | `FocusEventHandler` | 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. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `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" \| "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. |
| `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" \| "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` | `[]` | `RadioCardItem[]` | If provided, generate options based on items. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `onChange` | - | `(value: Y) => void` | The callback fired when any children radio 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"` | `"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 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" \| "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. |
| `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. |
| `justify` | `"start"` | `"end" \| "start"` | The justify indicator of the component |
| `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` | The callback invoked when the radio is blurred. |
| `onChange` | - | `ChangeEventHandler` | The callback invoked when the checked state changes. |
| `onFocus` | - | `FocusEventHandler` | 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. |
| `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the component |
| `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
Currently, this section is being updated due to the migration of v2.