Skip to main content
Version: 3.1.0-Beta 🚧

Radio Button

The Radio button component can be used to collect user input from a list of options.

Data

Property
Description
Expected Value
LabelText to display as the label for the component.String (e.g., Select an option).

Options

Allows you to add options to the radio button field. You can click on Add new option and add options manually or enable Dynamic options and enter the options using code.

Example Code for Dynamic Columns

  1. Passing an array of objects and specifying each value:
{{
[{label: 'option1', value: 1, disable: false, visible: true, default: true},
{label: 'option2', value: 2, disable: false, visible: true},
{label: 'option3', value: 3, disable: false, visible: true}]
}}
  1. Passing an array of objects with a default value from a Table component's selected row:
{{
queries.getEmployees.data.map(option => ({
label: option.firstname,
value: option.firstname,
disable: false,
visible: true,
default: option.firstname === components.table1.selectedRow.firstname
}))
}}

Options loading state

Allows you to add a loading state to the dynamically generated options. You can enable or disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Component specific actions (CSA)

Following actions of the component can be controlled using the component specific actions(CSA):

Actions
Description
How To Access
clear()Clears the selected option.Employ a RunJS query (for e.g.,
await components.radiobutton1.clear()) or trigger it using an event.
setVisibility()Sets the visibility of the component.Employ a RunJS query (for e.g.,
await components.radiobutton1.setVisibility(false)) or trigger it using an event.
setLoading()Sets the loading state of the component.Employ a RunJS query (for e.g.,
await components.radiobutton1.setLoading(true)) or trigger it using an event.
setDisable()Disables the component.Employ a RunJS query (for e.g.,
await components.radiobutton1.setDisable(true)) or trigger it using an event.
selectOption()Selects an option.Employ a RunJS query (for e.g.,
await components.radiobutton1.selectOption(2)) or trigger it using an event.
deselectOption()Deselects the selected option.Employ a RunJS query (for e.g.,
await components.radiobutton1.deselectOption()) or trigger it using an event.

Exposed Variables

Variable
Description
How To Access
labelHolds the label name of the radio button.Accessible dynamically with JS (for e.g., {{components.radiobutton1.label}}).
valueHolds the value selected by the user in the component.Accessible dynamically with JS (for e.g., {{components.radiobutton1.value}}).
optionsHolds all the option values of the radio button in array form.Accessible dynamically with JS (for e.g., {{components.radiobutton1.options}} or
{{components.radiobutton1.options[0].label}} for a specific option).
isValidIndicates if the input meets validation criteria.Accessible dynamically with JS (for e.g., {{components.radiobutton1.isValid}}).
isMandatoryIndicates if the field is required.Accessible dynamically with JS (for e.g., {{components.radiobutton1.isMandatory}}).
isLoadingIndicates if the component is loading.Accessible dynamically with JS (for e.g., {{components.radiobutton1.isLoading}}).
isVisibleIndicates if the component is visible.Accessible dynamically with JS (for e.g., {{components.radiobutton1.isVisible}}).
isDisabledIndicates if the component is disabled.Accessible dynamically with JS (for e.g., {{components.radiobutton1.isDisabled}}).

Events

Event
Description
On selectThe On select event is triggered when a particular option is chosen.
info

For comprehensive information on all available Actions, refer to the Action Reference documentation.

Validation

Validation Option
Description
Expected Value
Make this field mandatoryDisplays a 'Field cannot be empty' message if no option is selected.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Custom validationSpecifies a validation error message for specific conditions.Logical Expression (e.g., {{!components.radiobutton1.value && "Please select an option"}}).

Additional Actions

Action
Description
Configuration Options
Loading stateEnables a loading spinner, often used with isLoading to indicate progress. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
VisibilityControls component visibility. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
DisableEnables or disables the component. Toggle or set dynamically.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
TooltipProvides additional information on hover. Set a string value for display.String (e.g., Select an option. ).

Devices

Show on desktop

Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Show on mobile

Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.


Label

Label Property
Description
Configuration Options
ColorSets the color of the component's label.Select the color or click on fx and input code that programmatically returns a Hex color code.
AlignmentSets the position of the label and input field.Click on the toggle options or click on fx to input code that programmatically returns an alignment value - side or top.
WidthSets the width of the input field.Keep the Auto width option for standard width or deselect it to modify the width using the slider or through code entry in fx that returns a numeric value.

Switch

Field Property
Description
Configuration Options
BorderSets the border color of the checkboxes.Select the color or click on fx and input code that programmatically returns a Hex color code.
Checked backgroundSets the color of the selected checkbox.Select the color or click on fx and input code that programmatically returns a Hex color code.
Unchecked backgroundSets the color of the unselected checkboxes.Select the color or click on fx and input code that programmatically returns a Hex color code.
Handle colorSets the fill color of the selected checkbox.Select the color or click on fx and input code that programmatically returns a Hex color code.
TextSets the colors of the option labels.Enable the icon visibility, select icon and icon color

Container

Padding
Allows you to maintain a standard padding by enabling the Default option.