> From the [Strife developer docs](https://strife.app/docs/reference/fields/radio-group). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Radio Group

The Radio Group editor presents a predefined set of options where only one value can be selected at a time.

Each option is defined by a `name` (label shown to the editor) and a `value` (the stored value used in templates and APIs).

The editor is displayed in a **tab-style layout**, making it especially well suited for mutually exclusive choices that affect behavior or presentation. Common use cases include toggling appearance settings, selecting alignments, choosing layout variations, or controlling feature states.

From a data perspective, the Radio Group editor outputs the `value` of the selected option, ensuring a simple and predictable data structure for rendering logic and conditional handling.

The Radio Group editor is ideal whenever a clear, single-choice decision is required and the available options should be immediately visible and easy to compare.

### Settings

The **Radio Group** field includes one specific configuration option **in addition to the basic settings**.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="182">Option</th><th>Description</th></tr></thead><tbody><tr><td>Options</td><td>Options to display in the radio group. Each option must have a name and value while color, icon and avatar are optional</td></tr><tr><td>Default value</td><td>Default value to be selected in the radio group</td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-radio-group`
* **Type:** `str-radio-group`
* Reference ID: `str-radio-group`

The settings above map into the object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-radio-group",
    "type": "str-radio-group",
    "propertyName": "...",
    "options": {
        "items": [
            {
                "name": "...", //The name displayed to the editor
                "value": "...", //Value stored
                "icon": "..." //Optional icon name
            },
            ...
        ]
    },
    "defaultValue": "..." //A value matching an item's value in the items array
  },
  ...
}
```

### Live preview

> [!NOTE]
> This field does not have any default Strife Web Components. Custom live preview implementations are fully supported.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).