A lightning:radioGroup component represents a radio button group that can have a single option selected.
If the required attribute is true, at least one radio button must be selected. When a user interacts with the radio group and doesn't make a selection, an error message is displayed.
If the disabled attribute is true, radio button selections can't be changed.
This component inherits styling from Radio Button in the Lightning Design System. Set type="button" to create a component that inherits styling from Radio Button Group in the Lightning Design System.
This example creates a radio group with two options and option1 is selected by default. One radio button must be selected as the required attribute is true.
<aura:component> <aura:attribute name="options" type="List" default="[ {'label': 'apples', 'value': 'option1'}, {'label': 'oranges', 'value': 'option2'} ]"/> <aura:attribute name="value" type="String" default="option1"/> <lightning:radioGroup aura:id="mygroup" name="radioButtonGroup" label="Radio Button Group" options="{! v.options }" value="{! v.value }" onchange="{! c.handleChange }" required="true" /> </aura:component>
You can check which values are selected by using cmp.find("mygroup").get("v.value"). To retrieve the values when the selection is changed, use the onchange event handler and call event.getParam("value").
({ handleChange: function (cmp, event) { var changeValue = event.getParam("value"); alert(changeValue); } });
Accessibility
The radio group is nested in a fieldset element that contains a legend element. The legend contains the label value. The fieldset element enables grouping of related radio buttons to facilitate tabbing navigation and speech navigation for accessibility purposes. Similarly, the legend element improves accessibility by enabling a caption to be assigned to the fieldset.
Methods
This component supports the following method.
checkValidity(): Returns the valid property value (Boolean) on the ValidityState object to indicate whether the radio group has any validity errors.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
name | String | Specifies the name of an input element. | |
value | Object | Specifies the value of an input element. | |
variant | String | The variant changes the appearance of an input field. Accepted variants include standard and label-hidden. This value defaults to standard. | |
disabled | Boolean | Specifies that an input element should be disabled. This value defaults to false. | |
readonly | Boolean | Specifies that an input field is read-only. This value defaults to false. | |
required | Boolean | Specifies that an input field must be filled out before submitting the form. This value defaults to false. | |
validity | Object | Represents the validity states that an element can be in, with respect to constraint validation. | |
onchange | Action | The action triggered when a value attribute changes. | |
accesskey | String | Specifies a shortcut key to activate or focus an element. | |
tabindex | Integer | Specifies the tab order of an element (when the tab button is used for navigating). | |
onfocus | Action | The action triggered when the element receives focus. | |
onblur | Action | The action triggered when the element releases focus. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
label | String | Text label for the radio group. | Yes |
options | List | Array of label-value pairs for each radio button. | Yes |
type | String | The style of the radio group. Options are radio or button. The default is radio. | |
messageWhenValueMissing | String | Optional message displayed when no radio button is selected and the required attribute is set to true. |