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.