Radio

The Radio component allows the user to select one option from a set of mutually exclusive components.

Example

You can use the Radio component to create an app that:

Radio component

Note: The Radio component follows the WCAG 2.0 AA accessibility guidelines.

Properties

The following Radio component properties are available:

Main

Property Description Required
Component ID Enter a unique name for the component. See Templating in components for more details. Yes
Label Enter the text you want to display above the component. Yes
Description Add a description for the component. This is displayed under the Label. No
Hint Enter a text under the component to give the user any additional information. Validation messages have priority and will hide the hint temporarily. No
Options Enter the resource to return the data for the component, these will be the Radio options. You can choose the array from the Templating drop-down displayed when selecting the Plus (+) button (only arrays will be available) or type it in using Liquid. For example {{res1}}.
Note: You must edit the Resource in the Resources tab.
No
Value field This is the real data associated with the options. Import a value using Liquid from the previously imported array in Options. For example, {{code}}. No
Display field This is what is visible to the user. Import a value using Liquid from the previously imported array in Options. For example, {{name}}. No
Default value Enter a value from the Value field if you want an Option to appear selected by default.
Note: If the value is an integer number returned by a Resource, you must add {{}}for it to work. For example: {{1}}.
No

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

Validation

Property Description Required
Optional field Turn on to make the component optional. By default, the component is required. No
Add rule Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. See Add rules to trigger properties for more details. No
Message Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown. No
Additional validations Select any or all of the following checkboxes to add validations. No
Error Select the checkbox to add a red error style validation to the component. No
Add rule Add rules in Liquid to specify when the error validation is shown. Yes
Error message Enter a message to be displayed if the user fills in the input incorrectly. Yes
Warning Select the checkbox to add an orange warning style validation to the component. No
Add rule Add rules in Liquid to specify when the warning validation is shown. Yes
Warning message Enter a message to give the user advice on how to better fill in the input. Yes
Positive Select the checkbox to add a green positive style validation to the component. No
Add rule Add rules in Liquid to specify when the positive validation is shown. Yes
Positive message Enter a message to tell the user that the input has been correctly filled in. Yes

Interactions

Property Description Required
Hidden Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. No
Add rule You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. No
Disabled Select the checkbox to disable the component in the end-user app. No
Add rule You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. No

Note: See Add rules to trigger properties for more information on setting rules for these properties.

Accessibility

Property Description Required
Aria label Enter a text that allows assistive technology to attach a label to the component. No
Title Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. No

Events

The Radio component supports the On update event. See Events and actions for more details.

Radio logic map