Skip to main content

Radio Button

Capture user input where a user must choose one option from a set of options.

Use a radio button component to capture user input based on a a set of options

Set radio group label and options

  1. Drag a Radio component from the Components panel
  2. In the Properties panel, change the Label and change the label/value pairs for each option

Drag a radio button component on to the canvas and update the properties to adjust the options and their corresponding values

Dynamically set radio options from API response

  1. Create an API to load data from a data source
  2. In the Properties panel, change the Options to code
  3. Select the API response in the code box

The output from the API must be in the following format:

[
{
"label": "New York",
"value": "NY"
},
{
"label": "California",
"value": "CA"
}
]

The following example builds the required output directly from a SQL statement:

select DISTINCT(user_email) AS user_email, id as value from orders;

The following example shows how a javascript arrow function can be used to transform data into the required JSON format:

{{API1.response.map((el) => ({label: el.user_email, value: el.id}))}}

Dynamically populate the radio button options based on the response of an API querying a SQL database

Radio Button Properties

Component Properties

PropertyDescription
LabelSet the text to be above beside the radio button options
OptionsAdd Display and Value of each option
Default Selected ValueChoose the default value
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}
VerticalToggles vertical and horizontal alignment of radio boxes
Loading AnimationControls the loading state of the component, values are a boolean
RequiredMakes checking this component mandatory, values are a boolean

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Selected Option / selectedOptionValuestringNY

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Radio Button component, and dot referencing the property. For a Radio Button named RadioGroup1:

PropertyDescription
RadioGroup1.optionsReturns an array of all of the options
RadioGroup1.selectedOptionValueReturns a string of the selected value
RadioGroup1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
RadioGroup1.isRequiredReturns the boolean value of the component's required state (True, if it is required)

Events

The following events are triggered by user interactions with Radio Button components. Use event handlers to trigger actions in response to user events.

Table Reference PropertyDescription
onSelectionChangeRun an API every time the Radio Button is clicked