# Radio Button

<figure><img src="https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-9d7f11f7e971ce7b26b2719f2abbd55551bc712f%2Fradio-button-web-control-v183-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.

## Properties

### General

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

For more on how to use the Input ID, see [Connecting Labels to Input Controls](https://github.com/airkit/airkit-docs/blob/master/docs/v18-3/connecting-labels-to-input-controls.md).

#### Input Name

Expects type `text.`

Defines the name property to the HTML on the  tag.

### Data Binding

#### Value

Expects type `any`.

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

#### Selected

Expects type `text.`

By default, a Variable of type Text is generated at the Web Page level to store the data from the input. Users can also edit the Data Binding property and create their own Variables.

### Accessibility

#### 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).

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

## Style

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](https://github.com/airkit/airkit-docs/blob/master/docs/v18-3/web-control-styling-properties.md) 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.

## 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://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-97dce121fae117b7966107ccfcd573ac6a09ffba%2Fradio-button-web-control-v183-1.png?alt=media)
