Radio Button Lists
Last updated
Was this helpful?
Last updated
Was this helpful?
Radio Buttons allow a user to only select one item from a list. Using radio buttons are useful when only one item can and should be selected. This guide will walk through how to add a radio button to a web page.
With the Web Page selected in the tree, click on the '+' icon and add the to the web page. The Radio Button List control is located in the Repeater category.
The Radio Button List Control comes preconfigured with a nested in the list. The Radio Cell is a container where additional controls can be added to further customize the radio button experience. In this example, the Radio Cell will contain a control and a to describe the item.
With the RadioCell selected in the tree, click on the '+' icon and add the Radio Button Control.
Go to the inspector and under the property Style > Distribute Children change it to Stack Horizontal and make the arrangement to be Center Left.
Then add a Label control.
Click on the Label control in the tree and change the Text property to:
This will pass the data from the Radio Button List to reflect in the label.
A variable is needed to store the value of the selected item from the radio button list. To add a variable, click on the web page in the tree, and click on the '+' icon in the inspector under Variables. Add a text variable type and call it selected.
Then, click on the Radio Button List in the tree and add a list of objects to the Data property under Data Binding.
Then add item to the Value Text property. Next, add item = selected to the Selected property. And under Control Properties > Value, add the selected variable. The properties on the Radio Button list should look like this:
After completing these steps, the Radio Button list should be functioning and the item selected is stored in the selected variable!
This guide walked through how to manually create a radio button list. With , there is the Radio Button Cell Static template and the Radio Button Cell Dynamic template that will automatically create a radio button list for you in a separate . These can be found in the Training Category of Kitcloud when you create a new Web Flow.
