---
url: /documentation/input-types/radio.md
description: >-
  Configure single-choice radio inputs with options, descriptions, orientation,
  and isEmpty or equals conditions.
---

# Radio Input&#x20;

Radio input for selecting one option from a list.

Mostly interchangeable with the [select input](select), but preferable for a small number of options from a user experience standpoint.

```js
{
  input: {
    type: 'radio', // [!code focus:12]
    options: [
      {
        value: 'opt1',
        label: 'Option 1',
        description: 'More info about this item.'
      },
      {
        value: 'opt2',
        label: 'Option 2'
      }
    ]
  }
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `options` | `Option[]` | `null`  | Selectable options as an array of objects. |
| `orientation` | `'horizontal' \| 'vertical'` | `'vertical'` | How the items are arranged. |

with

```ts
interface Option {
  /**
   * The value returned if the option is selected
   */
  value: string

  /**
   * The human readable name of the option
   */
  label: string

  /**
   * Additional information about the option
   */
  description?: string

  /**
   * Whether the option is preselected if no choice has been made
   * 
   * @deprecated Use the property definition's `defaultValue` instead
   */
  selected?: boolean
}
```

## Conditions

The `radio` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether an item has been selected or not. |
| `equals` | `string` | Checks whether the selected value equals the `payload` string. |
