Uify Docs
Search
⌃K

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, which have a value and a label. Like inputs, switches and selects, the Radio group fits well into the context of a Form.
Radio group component

Properties

The Radio group component offers the following configuration properties.
Property
Type
Default value
Behavior
Default value
string
'one'
Determines which radio button will be selected by default at first render. This value is also used when the reset() function is called.
Disabled
boolean
false
Whether the input should be disabled or not. When disabled, the input is greyed out and values cannot be toggled.
Label position
'left' | 'right'
'left'
Determines whether the labels of the radio buttons are on the left or the right.
Labels
array
['One', 'Two', 'Three']
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.
Text alignment
'left' | 'center' | 'right'
'left'
Alignment of the radio button labels and the "Title" text. There is no way to set these alignments separately.
Title
stringWithJs
'Radio group'
The text rendered above the radio button inputs. Does not create unnecessary whitespace when left empty.
Toggle with label
boolean
false
By default, the radio buttons can only be selected when clicking directly on the input. When this property is set to true, a click on the label text will change selection as well.
Values
array
['one', 'two', 'three']
Array of internal values of the options. Its length determines how many radio options are rendered. Non-string elements of the array are ignored.

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.
Property / Function
Type
Behavior
disabled
boolean
Current boolean value of the "Disabled" property.
labels
string[]
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.
reset()
() => void
Resets the radio group similar to the current value of the "Default value" property. This is especially useful when a Form is reset to its default state.
setDisabled(value)
(value: boolean) => void
Sets the value of the "Disabled" property to the provided boolean value.
setLabels(value)
(value: string[]) => void
Sets the value of the "Labels" property to the provided strings array.
setTitle(value)
(value: string) => void
Sets the "Title" property to the provided string value.
setValues(value)
(value: string[]) => void
Sets the option values to the provided string array.
title
string
Provides the current string value of the "Text" property.
value
string
Value of the currently selected radio button. Should always be a member of the array returned by values
values
string[]
Current value of the "Values" property.