# Radio Button

<figure><img src="https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-9d7f11f7e971ce7b26b2719f2abbd55551bc712f%2Fradio-button-web-control-v182-0.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

The Radio Button Web Control is an Input control that allows the selection of values.

## General

### Control Properties

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

#### Input ID

Expects type `text`.

The Input ID assigned to the Radio Button. This Input ID can tied to a [Label](label-web-control) so that clicking on the associated Label will allow users to select the Radio Button.

### Data Binding

#### Value

Expects type `any`.

The value that the bound variable will have when the Radio Button is selected.

### Style and Layout

Radio Buttons have styles for the following states:

**Default** - When first rendered without state\
**Selected** - when the Data Binding evaluates to true\
**Disabled** - When the Radio Button is disabled

Check [Common style properties of web controls](web-controls-overview/common-style-properties-of-web-controls) for further details on how to style your Radio Button Web Control.

## Actions

#### Value Changed

This event is run whenever the radio button is selected or unselected.

Metadata about this event can be accessed through the `event` namespace.

## Advanced

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the Radio Button will be visible. If `FALSE` the Radio Button will not be displayed. If the field is empty, the Radio Button will be visible.

#### Is Disabled

Expects type `boolean`.

If `TRUE` the Radio Button will be disabled and the user will not be able to interact with the control. If `FALSE` the Radio Button will be enabled. If the field is empty, the Radio Button will be enabled.

## Example

To be able to align the Radio Buttons with lines of text, a [Selectable Container](selectable-container) Web Control must be added first for each item to be selected. Then add the Radio Buttons and the Labels describing the items.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-740e33f3e0a46b96776ccd43c01b24d463be5c43%2Fradio-button-web-control-v182-1.png?alt=media)
