Radio
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
Configuring the radio field elementโ
Radio settingsโ
The available configuration options for this form element are:
Generalโ
- Process data key - creates the binding between form element and process data so it can be later used in decisions, business rules or integrations
Propertiesโ
- Label - the label that appears on the radio
- Helpertext - additional information about the radio (can be hidden inside an infopoint)
Datasourceโ
- Default Value - the default values of the radio element
- Source Type - it can be Static, Enumeration, or Process Data
- Add option - label - value pairs can be defined here
Validatorsโ
The following validators can be added to a radio: required
and custom
(more details here)
Expressionsโ
The radio's element behavior can be defined using JavaScript expressions for hiding or disabling the element. The following properties can be configured for expressions:
- Hide - JavaScript expression used to hide the Radio element when it returns a truthy value
- Disabled - JavaScript expression used to disable the Radio element when it returns a truthy value
It's important to make sure that disabled fields have the same expression configured under the path expressions โ hide.
UI actionsโ
UI actions can be added to the radio element to define its behavior and interactions.
- Event - possible value:
CHANGE
- Action Type - select the action type
For more details on how to configure a UI action, click here.
Radio stylingโ
Propertiesโ
The type of the radio can be selected by using the styling tab in UI Designer, possible values:
- clear
- bordered
Typographyโ
You can customize the typography for the following properties:
- Label
- Options
- Helper & errors
For more details on how to upload and manage fonts, check the following section:
ยปFont managementFor more valid CSS properties, click here.
A Radio element with two options added, and with a layout configuration set to horizontal will look like as it follows: