---
title: Radio
description: "`Radio` 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
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-radio--basic
---

```tsx
<RadioGroup.Root>
  <RadioGroup.Item value="1">織田信長</RadioGroup.Item>
  <RadioGroup.Item value="2">豊臣秀吉</RadioGroup.Item>
  <RadioGroup.Item value="3">徳川家康</RadioGroup.Item>
</RadioGroup.Root>
```

## Usage

```tsx
import { Radio, RadioGroup } from "@yamada-ui/react"
```

```tsx
import { Radio, RadioGroup } from "@/components/ui"
```

```tsx
import { Radio, RadioGroup } from "@workspaces/ui"
```

```tsx
<RadioGroup.Root>
  <RadioGroup.Item />
</RadioGroup.Root>
```

### Use Items

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

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

### Change Variant

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "Checked", value: "1" },
    { label: "No checked", value: "2" },
  ],
  [],
)

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

### Change Size

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "Checked", value: "1" },
    { label: "No checked", value: "2" },
  ],
  [],
)

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

### Set Default Value

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

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

return <RadioGroup.Root defaultValue="1" items={items} />
```

### Default Checked

To default checked, set `defaultChecked` to `true`.

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { defaultChecked: true, label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

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

### Change Direction

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

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

return <RadioGroup.Root items={items} orientation="horizontal" />
```

### Change Shape

To change the shape, set `shape` to `"circle"`, `"square"` or `"rounded"`. The default is `"circle"`.

```tsx
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

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

### Disable

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

```tsx
<RadioGroup.Root>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant) => (
      <RadioGroup.Item key={variant} variant={variant} disabled>
        {toTitleCase(variant)}
      </RadioGroup.Item>
    )}
  </For>
</RadioGroup.Root>
```

### Read-Only

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

```tsx
<RadioGroup.Root>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant) => (
      <RadioGroup.Item key={variant} variant={variant} readOnly defaultChecked>
        {toTitleCase(variant)}
      </RadioGroup.Item>
    )}
  </For>
</RadioGroup.Root>
```

### Invalid

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

```tsx
<RadioGroup.Root>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant) => (
      <RadioGroup.Item key={variant} variant={variant} invalid>
        {toTitleCase(variant)}
      </RadioGroup.Item>
    )}
  </For>
</RadioGroup.Root>
```

### Change Border Color

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

```tsx
<RadioGroup.Root>
  <RadioGroup.Item value="1">Default border color</RadioGroup.Item>
  <RadioGroup.Item focusBorderColor="green.500" value="2">
    Custom border color
  </RadioGroup.Item>
  <RadioGroup.Item errorBorderColor="orange.500" invalid value="3">
    Custom border color
  </RadioGroup.Item>
</RadioGroup.Root>
```

### Control

```tsx
const [value, setValue] = useState("1")
const items = useMemo<RadioGroup.Item[]>(
  () => [
    { label: "織田信長", value: "1" },
    { label: "豊臣秀吉", value: "2" },
    { label: "徳川家康", value: "3" },
  ],
  [],
)

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

### Use Custom Component

```tsx
const { getInputProps, getLabelProps, getRootProps } = useRadioGroup({
  defaultValue: "1",
})

const CustomRadio = ({ children, ...rest }) => {
  return (
    <Box
      as="label"
      css={{
        "&:has(input:checked)": {
          bg: "colorScheme.solid",
          borderColor: "colorScheme.solid",
          color: "colorScheme.contrast",
        },
        alignItems: "center",
        borderWidth: "1px",
        display: "flex",
        h: "10",
        px: "3",
        rounded: "l2",
      }}
      {...getLabelProps()}
    >
      <Box as="input" {...getInputProps(rest)} />
      {children}
    </Box>
  )
}

return (
  <HStack {...getRootProps()}>
    <CustomRadio value="1">織田信長</CustomRadio>
    <CustomRadio value="2">豊臣秀吉</CustomRadio>
    <CustomRadio value="3">徳川家康</CustomRadio>
  </HStack>
)
```

## Props

### Radio

| 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"`                                                                                                                                            | The size of the component.                           |
| `variant`          | `"solid"`  | `"outline" \| "solid" \| "subtle" \| "surface"`                                                                                                                   | The variant of the component.                        |
| `checked`          | -          | `boolean`                                                                                                                                                         | If `true`, the radio will be checked.                |
| `defaultChecked`   | `false`    | `boolean`                                                                                                                                                         | If `true`, the radio will be initially checked.      |
| `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`   | -          | `RadioIndicatorProps`                                                                                                                                             | Props for the indicator component.                   |
| `inputProps`       | -          | `HTMLStyledProps<"input">`                                                                                                                                        | Props for the input element.                         |
| `invalid`          | `false`    | `boolean`                                                                                                                                                         | If `true`, the field will be invalid.                |
| `labelProps`       | -          | `RadioLabelProps`                                                                                                                                                 | 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.                         |
| `shape`            | `"circle"` | `"circle" \| "rounded" \| "square"`                                                                                                                               | The shape of the component                           |
| `value`            | -          | `Y`                                                                                                                                                               | The value of the radio.                              |

### RadioGroup.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"`                                                                                                                                            | The size of the component.                                                                               |
| `variant`          | `"solid"`      | `"outline" \| "solid" \| "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`            | `[]`           | `RadioItem<Y>[]`                                                                                                                                                  | If provided, generate options based on items.                                                            |
| `justify`          | -              | `"-moz-initial" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert-layer" ...`                         | The CSS `justify-content` property.                                                                      |
| `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.                                                                            |
| `wrap`             | -              | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" ...`                                   | The CSS `flex-wrap` property.                                                                            |

### RadioGroup.Item

| 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"`                                                                                                                                            | The size of the component.                           |
| `variant`          | `"solid"`  | `"outline" \| "solid" \| "subtle" \| "surface"`                                                                                                                   | The variant of the component.                        |
| `checked`          | -          | `boolean`                                                                                                                                                         | If `true`, the radio will be checked.                |
| `defaultChecked`   | `false`    | `boolean`                                                                                                                                                         | If `true`, the radio will be initially checked.      |
| `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`   | -          | `RadioIndicatorProps`                                                                                                                                             | Props for the indicator component.                   |
| `inputProps`       | -          | `HTMLStyledProps<"input">`                                                                                                                                        | Props for the input element.                         |
| `invalid`          | `false`    | `boolean`                                                                                                                                                         | If `true`, the field will be invalid.                |
| `labelProps`       | -          | `RadioLabelProps`                                                                                                                                                 | 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.                         |
| `shape`            | `"circle"` | `"circle" \| "rounded" \| "square"`                                                                                                                               | The shape of the component                           |
| `value`            | -          | `Y`                                                                                                                                                               | The value of the radio.                              |

## Accessibility

Currently, this section is being updated due to the migration of v2.