lightning:radioGroup

A radio button group that can have a single option selected. This component requires API version 41.0 and later.

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.

Attributes

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.