# Radio Button List

A Check box list renders a list of options and allows user to select one value. It is identical in function to a drop down. The selected value is passed through to a script as part of an event.

***

{% embed url="<https://www.youtube.com/embed/gj7SARuAIYw?autoplay=1&rel=0&vq=1080>" %}
*Add a Radio Button List*
{% endembed %}

***

### Properties

1. **Direction**

   TopToBottom or LeftToRight - How the options should display to the user ![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-ef37b0f559c291dd00c19aec28c93aa7f7c27737%2Fradiobuttonlist%20copy.png?alt=media)
2. **Options**

   Specify a list of options to display in the control. It can be generated from a static list or from data. When populating the Options from a [*Connector*](https://docs.stadium.software/connectors) or file, use the Field Mapping Editor found in the Property Grid (seen circled in red below) to assign the *Text* and the *Value* of the items. ![](https://3514041584-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxH8JA8xG3I22tiZG5H6%2Fuploads%2Fgit-blob-2f132a2f0db7d340b55f3cf7b360f4631825c3b9%2Flist-options.png?alt=media)
3. **Read-Only**

   Set to True if you want the control to display as read-only (value can't be changed) on the page.
4. **Selected Value**

   The option selected when the page loads. The Selected Value must map to one of the Options Values (not Text) in order to work. This option is saved if the user doesn't change it
5. **Validations**

   Some Validators that can be applied to the RadioButtonList
6. **Visible**

   Set to False if you don't want this control to render on the page and be visible to the user. In the near future, you will be able to use a script to make it visible when an event occurs.

***

### Assigning data to a RadioButtonList

Example:

To display a RadioButtonList containing option values retrieved by a SQL query:

1. Use an appropriate [Event](https://docs.stadium.software/features/events), e.g. *Load* (page) or *Click* (button) to which a [*SetValue* ](https://docs.stadium.software/actions/set-value)action can be added.
2. Add a [SetValue](https://docs.stadium.software/actions/set-value) action that populates the RadioButtonList *options* with each returned value.

Data:

RadioButtonLists expect a `List` of objects containing a `text` and a `value` property

```json
[
    {"text":"Monday","value":"1"},
    {"text":"Tuesday","value":"2"},
    {"text":"Wednesday","value":"3"},
    {"text":"Thursday","value":"4"},
    {"text":"Friday","value":"5"}
]
```

The [Field Mapping ](https://docs.stadium.software/features/mappings)option in the [SetValue](https://docs.stadium.software/actions/set-value) action allows for the mapping of object properties other than text & value to these properties

***

### Retrieving data from a RadioButtonList

Properties that can contain data:

* Options (Value)

Use an [action](https://docs.stadium.software/actions) to capture the values from the control. Go here for more details on how to collect data from controls.

***

### Events

1. **Change**

   An event that triggers when another option in the dropdown is selected.

   [Event](https://docs.stadium.software/features/events) Input Parameters:

   1. PreviousOption\
      The *Text* and *Value* of the option that was selected before selecting the option.
   2. SelectedOption\
      The *Text* and *Value* of the newly selected option.