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
• Properties
• Datasource
• Validators
• Expressions
• UI actions
• Radio styling

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

info

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

info

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 management

info

For 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: