Radio Group
lightning:radioGroup
A radio button group that can have a single option selected. This component requires API version 41.0 and later.
For Aura components only. For LWC development, use lightning-radio-group.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
A lightning:radioGroup component represents a group of radio buttons that permit only one button to be selected at a time. The component renders radio button <input> elements and assigns the same value to the name attribute for each element. The common name attribute joins the elements in a group. If you select any radio button in that group, any previously selected button in the group is deselected.
If the required attribute is true, at least one radio button in the group must be selected. When a user interacts with the radio button 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.
Setting the name attribute in lightning:radioGroup isn’t recommended.
The component automatically generates a unique value for name if none is provided. The generated value ensures a common name for the <input> elements rendered for the radio button group, and is unique on the page. See Use Multiple Radio Groups on a Page.
This component implements styling from Radio Button in the Lightning Design System. Set type="button" to create a component that implements 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. The name radioButtonGroup is assigned so that only one button can be selected. The required attribute is set so that a user must select one button.
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").
To create radio buttons, pass in the following properties to the options attribute.
| Property | Type | Description |
|---|---|---|
| label | string | The text that displays next to a radio button. |
| value | string | The string that’s used to identify which radio button is selected. |
Client-side input validation is available for this component. For example, an error message is displayed when the radio group is marked required and no option is selected. Note that a disabled radio group is always valid.
You can override the default message using messageWhenValueMissing when a radio group is required and no option is selected. This message is displayed when you remove focus from the radio group.
To programmatically display error messages on invalid fields, use the reportValidity() method. For custom validity error messages, display the message using setCustomValidity() and reportValidity(). For more information, see the lightning:input documentation.
If multiple lightning:radioGroup instances on a page or across Salesforce app console tabs share a name attribute, their rendered <input> elements also share the same selection scope. Selecting an option in any single group clears active selections in the remaining groups.
To keep radio group selections independent on the same page or across tabs, choose one of these approaches:
- Omit the
nameattribute to enable the component to automatically generate a unique name on each instance. - Enclose each
lightning:radioGroupcomponent in a<form>element and provide your own value forname. This solution isolates the scope so you can reuse customnamevalues without causing selection conflicts across radio groups.
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.