# 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](https://docs.uify.io/component-reference/switch) and selects, the `Radio group` fits well into the context of a `Form`.

<figure><img src="https://1582137130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkTYtq8XZyg79paoHbd93%2Fuploads%2FeCNc9sZzSoIm8pIuYXrc%2FScreen%20Cast%202022-10-20%20at%204.33.01%20PM.gif?alt=media&#x26;token=c81da785-ea0a-46a8-8954-1c752bb1a965" 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>