Skip to main content

Radio button

A radio button is select input component that allows users to select one option from a group of pre-defined options. It appears as a rounded square button, which can be selected or deselected by users. When a radio button is selected, all other radio buttons in the same group are automatically deselected, ensuring that only one option can be selected at a time. Radio buttons are commonly used in forms, questionnaires, and surveys to help users make a single choice from a list of options.

Properties

Manual options

Add new options or delete options manually and configure the options one by one. The properties of options are as follows:

PropertiesDescription
LabelThe text displayed for the option
ValueThe value associated with the option
DisabledWhether the option is disabled for selection

Mapped options

You can also add options from a data source by mapping the label and value properties to the corresponding data fields. You can get options dynamically from the database in this way. At the end of this article, we will demonstrate how to use it through an example.

PropertiesDescription
Data sourceSet the data source of options
LabelUse {{item}} to set the label of options
ValueUse {{item}} to set the value of options
DisabledUse {{item}} to set whether the option is disabled for selection

Other properties

PropertiesDescription
Default valueThe initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.
PlaceholderThe value will be shown when the input field is empty.
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
Show clear buttonSet whether to show the clear button
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleeditor.inspect.setter_tooltip.custom_rule
Hide validation messageYou can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.
Form Data KeySpecify a key of a wrapping form component when constructing the data attribute.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Theme colorTo select the theme color of the component

Method

You can use other components to control the component. We support the following three methods:

setValue

To set the selected option, for example, {{”value1”}}

PropertiesDescription
ValueA string of selected option value.

clearValue

To clear the selected options

validate

To verify that the input information is legal

clearValidate

To clear the validation message

Event handler

We support listening to the onChange event of the radio button component.

When the selected option changes, it can trigger a specified action. This means that when a user selects a different option from a group of radio buttons, a particular action can be taken based on the selected option. For example, in a web form, selecting a different option can trigger the display of different form fields or the submission of the form to a different destination. In this way, the option selected by the user can affect the behavior of the software or web application they are using. The ability to trigger specified actions based on user input is an important aspect of interactive software design and can improve the usability and functionality of the software.

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
valuea string of value of the selected option

Use case

Next, we will demonstrate how to use the mapped mode to dynamically obtain options.

Step 1 Add an action

We have created a table named selection, including 5 columns: options_en, options_jp, options_zh, options_kr, value. We stored the option values in value and stored options label in different languages in other columns.

Create an actions to list all data in selection named postgresql1

select * from selection

Step 2 Configure the component

  1. Set the Data sources to {{postgresql1.data}}

  2. Configure the label to change the label based on the language.

    1. Use {{ item.columnName }} to set the column.
    2. Use {{ currentUserInfo.language }} to set the language users use in ILLA.
    {{currentUserInfo.language=='ja-JP' ? item.options_jp 
    : currentUserInfo.language == 'ko-KR' ? item.options_kr
    : currentUserInfo.language == 'zh-CN' ? item.options_zh
    : item.options_en }}