# Radio Button Lists

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-00fd9b11130aebc47d3b38f91dd7073aab3f7b5e%2Fradio-button-lists-v1715-0.gif?alt=media)

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.

### Adding the Radio Button List Control

With the Web Page selected in the tree, click on the '**+**' icon and add the [Radio Button List Control](../../web-controls/radio-button-list-web-control) to the web page. The Radio Button List control is located in the **Repeater** category.&#x20;

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-60d37cace2aa7b44c2f1ea95d520c5f835bdee3a%2Fradio-button-lists-v1715-1.png?alt=media)

### Configuring the Radio Cell

The Radio Button List Control comes preconfigured with a [Radio Cell](../../web-controls/radio-cell-web-control) 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 [Radio Button](../../web-controls/radio-button-web-control) control and a [label](../../web-controls/label-web-control) to describe the item.&#x20;

With the RadioCell selected in the tree, click on the '+' icon and add the Radio Button Control.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-11631d9fc698915ccf44fbfdac66f1be1b30a00a%2Fradio-button-lists-v1715-2.png?alt=media)

Go to the inspector and under the property **Style** > **Distribute Children** change it to Stack Horizontal and make the arrangement to be **Center Left**.

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-4754a8d5954ee568565535863cd3db40ad6b7f01%2Fradio-button-lists-v1715-3.png?alt=media)

Then add a Label control.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-f38e2a105cbcbdd9c80a15e06fd742bb3f41298c%2Fradio-button-lists-v1715-4.png?alt=media)

Click on the Label control in the tree and change the Text property to:

```javascript
item
```

This will pass the data from the Radio Button List to reflect in the label.&#x20;

![organizing info](https://a01-support.airkit.com/creating-a-radio-button-list/mceclip3.png)

### Adding a Web Page Variable

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.**

![organizing info](https://a01-support.airkit.com/creating-a-radio-button-list/mceclip4.png)

### Configuring the Radio Button List

Then, click on the Radio Button List in the tree and add a list of objects to the **Data** property under **Data Binding**.&#x20;

```javascript
[ "Apples", "Bananas", "Oranges" ]
```

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:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-b340d4b70e9268f2b77aed204472ee12149bff8a%2Fradio-button-lists-v1715-5.png?alt=media)

After completing these steps, the Radio Button list should be functioning and the item selected is stored in the selected variable!

### Additional

This guide walked through how to manually create a radio button list. With [Kitcloud](../kitcloud), 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 [web flow](../../studio/web-flows). These can be found in the **Training** Category of Kitcloud when you create a new Web Flow.&#x20;

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-8107637c027b589cabbd74026ff330d01678e567%2Fradio-button-lists-v1715-6.png?alt=media)
