# Radio group

The `Radio group` component allows for the selection of a single value from a list of options. The options are presented as [radio buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), which have a value and a label. Like inputs, [switches](/component-reference/switch.md) and selects, the `Radio group` fits well into the context of a `Form`.

<figure><img src="/files/zFbixd2tDKpRzKxpKPJL" alt=""><figcaption><p>Radio group component</p></figcaption></figure>

### Properties

The `Radio group` component offers the following configuration properties.

<table><thead><tr><th width="158">Property</th><th width="159">Type</th><th width="161">Default value</th><th>Behavior</th></tr></thead><tbody><tr><td>Default value</td><td><code>string</code></td><td><code>'one'</code></td><td>Determines which radio button will be selected by default at first render. This value is also used when the <code>reset()</code> function is called.</td></tr><tr><td>Disabled</td><td><code>boolean</code></td><td><code>false</code></td><td>Whether the input should be disabled or not. When disabled, the input is greyed out and values cannot be toggled.</td></tr><tr><td>Label position</td><td><code>'left' | 'right'</code></td><td><code>'left'</code></td><td>Determines whether the labels of the radio buttons are on the left or the right.</td></tr><tr><td>Labels</td><td><code>array</code></td><td><code>['One', 'Two', 'Three']</code></td><td>Labels to be rendered for each option. In case there are more "Labels" than "Values", the redundant labels are ignored. If there are more "Values" than "Labels", the additional values are rendered with their raw value.</td></tr><tr><td>Text alignment</td><td><code>'left' | 'center' | 'right'</code></td><td><code>'left'</code></td><td>Alignment of the radio button labels and the "Title" text. There is no way to set these alignments separately.</td></tr><tr><td>Title</td><td><code>stringWithJs</code></td><td><code>'Radio group'</code></td><td>The text rendered above the radio button inputs. Does not create unnecessary whitespace when left empty.</td></tr><tr><td>Toggle with label</td><td><code>boolean</code></td><td><code>false</code></td><td>By default, the radio buttons can only be selected when clicking directly on the input. When this property is set to <code>true</code>, a click on the label text will change selection as well.</td></tr><tr><td>Values</td><td><code>array</code></td><td><code>['one', 'two', 'three']</code></td><td>Array of internal values of the options. Its length determines how many radio options are rendered. Non-string elements of the array are ignored.</td></tr></tbody></table>

### Events

The `Radio group` offers only a single event **"On change"**. This event is triggered whenever the selected option is changed by the user. Programmatically changing the value by using the `reset()` or `setValue(value)` functions does not trigger this event.

### API

The `Radio group` exposes the following API in the JavaScript runtime environment.

<table><thead><tr><th width="271">Property / Function</th><th width="210">Type</th><th>Behavior</th></tr></thead><tbody><tr><td> <code>disabled</code></td><td><code>boolean</code></td><td>Current boolean value of the "Disabled" property.</td></tr><tr><td><code>labels</code></td><td><code>string[]</code></td><td>Provides the current value of the "Labels" property. If the number of values and labels is not equal, the unpruned array will be returned, even if not all labels are used.</td></tr><tr><td><code>reset()</code></td><td><code>() => void</code></td><td>Resets the radio group similar to the current value of the "Default value" property. This is especially useful when a <code>Form</code> is reset to its default state.</td></tr><tr><td><code>setDisabled(value)</code></td><td><code>(value: boolean) => void</code></td><td>Sets the value of the "Disabled" property to the provided boolean value.</td></tr><tr><td><code>setLabels(value)</code></td><td><code>(value: string[]) => void</code></td><td>Sets the value of the "Labels" property to the provided strings array.</td></tr><tr><td><code>setTitle(value)</code></td><td><code>(value: string) => void</code></td><td>Sets the "Title" property to the provided string value.</td></tr><tr><td><code>setValues(value)</code></td><td><code>(value: string[]) => void</code></td><td>Sets the option values to the provided string array.</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Provides the current string value of the "Text" property.</td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Value of the currently selected radio button. Should always be a member of the array returned by <code>values</code></td></tr><tr><td><code>values</code></td><td><code>string[]</code></td><td>Current value of the "Values" property.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uify.io/component-reference/radio-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.