Radio

Example

Use the radio component to view the remaining fruit stock in a supermarket, as shown in the following figure.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. Above the component list on the left of the canvas, enter Radio, find the component, then drag it onto the canvas.

   For more information about adding components, see Add a component.

Step 2: Configure the data source

1. In the style panel on the right, click data source and then click Configure Data Source.
2. On the Configure Data Source page, select a data source type and complete the configuration.
   Available data types include API, static data, and application push.
3. Click OK.

Step 3: Configure styles

1. In the Style panel on the right, configure the component's display settings.

   Parameter	Description
   Radio Configuration	Sets the Default selected item and whether the component is Disabled. The Default selected item does not appear if you have not configured a data source or if the data source returns empty data. Selecting Disabled prevents users from selecting an option in preview mode.
   Radio Style	Configures the radio button type, option layout direction, component background color, label text, and button style.

2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

1. Select the Interaction tab and configure events and interactions. For more information, see Interaction configuration.
   This component supports the OnChange and OnClick events. For a selected label, the component returns the corresponding value.

2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.