Skip to main content
Version: 3.4.0

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โ€‹

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

Radio Form element example


Was this page helpful?