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.

Properties

The Radio group component offers the following configuration properties.

PropertyTypeDefault valueBehavior

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 / FunctionTypeBehavior

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.

Last updated