Lightning Components Developer Guide
jNewer Version Available
Radio Buttons
Radio buttons are clickable and actionable, and they can only be individually selected when presented in a group. You can create a radio button with ui:inputRadio, which inherits the behavior and events from ui:input. The value and disabled attributes control the state of a radio button, and events such as click and change determine its behavior. Events must be used separately on each radio button.
If you want to use radio buttons in a menu, use ui:radioMenuItem instead.
Here are several basic ways to set up a radio button.
- Selected
- To select the radio button, set value="true".
1<ui:inputRadio value="true" label="Select?"/> - Disabled State
-
1<ui:inputRadio label="Select" disabled="true"/>
The previous example results in the following HTML.
1<div class="uiInput uiInputRadio uiInput--default uiInput--radio">
2 <label class="uiLabel-left form-element__label uiLabel" for="globalId"><span>Select</span></label>
3<input type="radio" id="globalId">Providing Labels using An Attribute
You can also initialize the label values using an attribute. This example uses an attribute to populate the radio button labels and wire them up to a client-side controller action when the radio button is selected or deselected.
1<!--c:labelsAttribute-->
2<aura:component>
3 <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed,Closed Won"/>
4 <aura:iteration items="{!v.stages}" var="stage">
5 <ui:inputRadio label="{!stage}" change="{!c.doSomething}"/>
6 </aura:iteration>
7</aura:component>Working with Events
Common events for ui:inputRadio include the click and change events. For example, click="{!c.showItem}" calls the client-side controller action with the fuction name, showItem.
The following code updates the CSS class of a component when the radio button is clicked.
1<!--The radio button-->
2 <ui:inputRadio click="{!c.showItem}" label="Show Item"/>1/* The controller action */
2showItem : function(cmp, event) {
3 var myCmp = cmp.find('myCmp');
4 $A.util.toggleClass(myCmp, "cssClass");
5}