> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Radio

Picks exactly one option from a set — reach for `Checkbox` when several answers can be true at once, and `Select` past roughly ten options. Radios cannot be cleared once chosen, so include the neutral answer as an option rather than expecting the reader to undo.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Radio) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/inputs-radio--overview)

```tsx
import { Info } from '@wallarm-org/design-system/icons';
import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const Basic = () => (
  <RadioGroup name='framework' defaultValue='svelte'>
    <Radio value='react' data-testid='radio-react'>
      <RadioIndicator />
      <RadioLabel>React</RadioLabel>
      <RadioDescription>
        By selected this value, you agree to the terms and conditions.
      </RadioDescription>
    </Radio>

    <Radio value='solid'>
      <RadioIndicator />
      <RadioLabel>
        Solid
        <Tooltip>
          <TooltipTrigger>
            <Info />
          </TooltipTrigger>
          <TooltipContent>Additional information</TooltipContent>
        </Tooltip>
      </RadioLabel>
    </Radio>

    <Radio value='vue' disabled>
      <RadioIndicator />
      <RadioLabel>Vue</RadioLabel>
    </Radio>

    <Radio value='svelte'>
      <RadioIndicator />
      <RadioLabel>Svelte</RadioLabel>
    </Radio>
  </RadioGroup>
);
```

## Usage

```tsx
import { Info } from '@wallarm-org/design-system/icons';
import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';
```

## Examples

### Card

`variant='card'` gives every option its own bordered surface. As with `Checkbox`, cards
exist to carry a `RadioDescription` — a card holding a bare label wastes the room it asks for.

```tsx
import { Info } from '@wallarm-org/design-system/icons';
import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const Card = () => (
  <RadioGroup variant='card' name='framework' defaultValue='vue'>
    <Radio value='react'>
      <RadioIndicator />
      <RadioLabel>React</RadioLabel>
      <RadioDescription>
        By selected this value, you agree to the terms and conditions.
      </RadioDescription>
    </Radio>

    <Radio value='solid'>
      <RadioIndicator />
      <RadioLabel>
        Solid
        <Tooltip>
          <TooltipTrigger>
            <Info />
          </TooltipTrigger>
          <TooltipContent>Additional information</TooltipContent>
        </Tooltip>
      </RadioLabel>
    </Radio>

    <Radio value='vue' disabled>
      <RadioIndicator />
      <RadioLabel>Vue</RadioLabel>
      <RadioDescription>
        By selected this value, you agree to the terms and conditions.
      </RadioDescription>
    </Radio>

    <Radio value='svelte'>
      <RadioIndicator />
      <RadioLabel>Svelte</RadioLabel>
    </Radio>
  </RadioGroup>
);
```

### Form field

Wrapped in `Field`, so the question above the options comes from `FieldLabel` and
`FieldDescription`. Shown as plain rows and as cards.

```tsx
import { Field, FieldDescription, FieldLabel } from '@wallarm-org/design-system/Field';
import { Info } from '@wallarm-org/design-system/icons';
import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { HStack } from '@wallarm-org/design-system/Stack';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

export const FormField = () => (
  <HStack align='start' gap={40}>
    <Field>
      <FieldLabel>
        Label
        <Tooltip>
          <TooltipTrigger>
            <Info />
          </TooltipTrigger>
          <TooltipContent>Additional information</TooltipContent>
        </Tooltip>
      </FieldLabel>

      <FieldDescription>This is an input description.</FieldDescription>

      <RadioGroup name='framework' defaultValue='svelte'>
        <Radio value='react'>
          <RadioIndicator />
          <RadioLabel>React</RadioLabel>
          <RadioDescription>
            By selected this value, you agree to the terms and conditions.
          </RadioDescription>
        </Radio>

        <Radio value='solid'>
          <RadioIndicator />
          <RadioLabel>Solid</RadioLabel>
        </Radio>

        <Radio value='vue' disabled>
          <RadioIndicator />
          <RadioLabel>Vue</RadioLabel>
        </Radio>

        <Radio value='svelte'>
          <RadioIndicator />
          <RadioLabel>Svelte</RadioLabel>
        </Radio>
      </RadioGroup>
    </Field>

    <Field>
      <FieldLabel>
        Label
        <Tooltip>
          <TooltipTrigger>
            <Info />
          </TooltipTrigger>
          <TooltipContent>Additional information</TooltipContent>
        </Tooltip>
      </FieldLabel>

      <FieldDescription>This is an input description.</FieldDescription>

      <RadioGroup variant='card' name='framework' defaultValue='svelte'>
        <Radio value='react'>
          <RadioIndicator />
          <RadioLabel>React</RadioLabel>
          <RadioDescription>
            By selected this value, you agree to the terms and conditions.
          </RadioDescription>
        </Radio>

        <Radio value='solid'>
          <RadioIndicator />
          <RadioLabel>Solid</RadioLabel>
        </Radio>

        <Radio value='vue' disabled>
          <RadioIndicator />
          <RadioLabel>Vue</RadioLabel>
        </Radio>

        <Radio value='svelte'>
          <RadioIndicator />
          <RadioLabel>Svelte</RadioLabel>
        </Radio>
      </RadioGroup>
    </Field>
  </HStack>
);
```

## Props

| Prop           | Type                                                 | Default | Description                                                                                         |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| title          | `string \| undefined`                                |         |                                                                                                     |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                     |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                     |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                     |
| id             | `string \| undefined`                                |         |                                                                                                     |
| tabIndex       | `number \| undefined`                                |         |                                                                                                     |
| rel            | `string \| undefined`                                |         |                                                                                                     |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                     |
| disabled       | `boolean \| undefined`                               |         |                                                                                                     |
| value \*       | `string`                                             |         |                                                                                                     |
| asChild        | `boolean \| undefined`                               |         | Use the provided child element as the default rendered element, combining their props and behavior. |
| htmlFor        | `string \| undefined`                                |         |                                                                                                     |
| invalid        | `boolean \| undefined`                               |         |                                                                                                     |
| data-testid    | `string \| undefined`                                |         |                                                                                                     |

### RadioDescription

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### RadioGroup

| Prop           | Type                                          | Default   | Description                                                                                                            |
| -------------- | --------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------- |
| form           | `string \| undefined`                         |           | The associate form of the underlying input.                                                                            |
| title          | `string \| undefined`                         |           |                                                                                                                        |
| defaultChecked | `boolean \| undefined`                        |           |                                                                                                                        |
| defaultValue   | `string \| null \| undefined`                 |           | The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group. |
| autoFocus      | `boolean \| undefined`                        |           |                                                                                                                        |
| id             | `string`                                      |           | The unique identifier of the machine.                                                                                  |
| tabIndex       | `number \| undefined`                         |           |                                                                                                                        |
| rel            | `string \| undefined`                         |           |                                                                                                                        |
| onChange       | `ChangeEventHandler<T, Element> \| undefined` |           |                                                                                                                        |
| disabled       | `boolean \| undefined`                        |           | If `true`, the radio group will be disabled                                                                            |
| name           | `string \| undefined`                         |           | The name of the input fields in the radio (Useful for form submission).                                                |
| value          | `string \| null \| undefined`                 |           | The controlled value of the radio group                                                                                |
| asChild        | `boolean \| undefined`                        |           | Use the provided child element as the default rendered element, combining their props and behavior.                    |
| ids            | `ElementIds \| undefined`                     |           | The ids of the elements in the radio. Useful for composition.                                                          |
| readOnly       | `boolean \| undefined`                        |           | Whether the radio group is read-only                                                                                   |
| required       | `boolean \| undefined`                        |           | If `true`, the radio group is marked as required.                                                                      |
| invalid        | `boolean \| undefined`                        |           | If `true`, the radio group is marked as invalid.                                                                       |
| onValueChange  | `complex`                                     |           | Function called once a radio is checked                                                                                |
| orientation    | `"vertical" \| "horizontal" \| undefined`     |           | Orientation of the radio group                                                                                         |
| variant        | `{ default: string; card: string; }`          | `default` |                                                                                                                        |

### RadioLabel

| Prop           | Type                                                 | Default | Description                                                                                         |
| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| title          | `string \| undefined`                                |         |                                                                                                     |
| defaultChecked | `boolean \| undefined`                               |         |                                                                                                     |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                                                     |
| autoFocus      | `boolean \| undefined`                               |         |                                                                                                     |
| id             | `string \| undefined`                                |         |                                                                                                     |
| tabIndex       | `number \| undefined`                                |         |                                                                                                     |
| rel            | `string \| undefined`                                |         |                                                                                                     |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                                                     |
| asChild        | `boolean \| undefined`                               |         | Use the provided child element as the default rendered element, combining their props and behavior. |

## Explorer