> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/radio.md).

# Radio

![Radio modules containing groups of radio buttons, arranged as rows and columns](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2F79E1JvNyBcUSsvGr1Tgi%2FScreen%20Shot%202022-07-25%20at%201.18.05%20PM.png?alt=media\&token=0d6d2249-5dce-4928-9007-18e2fad8ad98)

## Overview

The **Radio module** can be used to add a radio button to be used in a form.

## Radio Properties <a href="#properties" id="properties"></a>

**Radio Group Id** (required)\
*String*\
Sets the ID of the radio group, which can be referenced by other elements.

**Radio Group Label**\
*String*\
Sets the label for the radio group, displayed above the contents of the radio group.

## **Radios**

**Radio Button Label** (required)\
*List of or a singular String(s)*\
Sets the contents (label) for a radio. Multiple radios can be added to a Radio Module, each with its own Button Label. Example: '*I have read the terms and conditions.'*

**Is this field required?**\
*Checkbox, default `disabled`*\
If enabled, guests will be required to fill a radio within the module. If a guest attempts to submit the form without filling it in, a default error message will be displayed.

**Custom Required Message**\
*String*\
This field can be used to customize the error message to be displayed if a radio for required field is not checked off. Example: '*Please select one of the options before proceeding.'*

**Radio Group Alignment** (required)\
*String,* [*`flex-direction`*](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) *css property*\
The alignment of items within the radio group. These values can be used:

* `row`
* `column`
* `row-reverse`
* `column-reverse`

**Size**\
*Dropdown, default `md`*\
Sets the size of the checkbox(es). These values can be used:

* `sm`
* `md`
* `lg`

**Style attribute**\
*String, css style property input*\
Can apply additional CSS to customize the radio

## Nodes <a href="#nodes" id="nodes"></a>

### Broadcasters

**Radio:on-change**