ui:inputRadio | Lightning Components Developer’s Guide

A ui:inputRadio component represents a radio button whose state is controlled by the value and disabled attributes. It's rendered as an HTML input tag of type radio. To group your radio buttons together, specify the name attribute with a unique name.

This is a basic set up of a radio button.

1<ui:inputRadio label="Yes"/>

This example results in the following HTML.

1<div class="uiInput uiInputRadio">
2    <label class="uiLabel-left uiLabel">
3        <span>Yes</span>
4    </label>
5    <input type="radio">
6</div>

This example retrieves the value of a selected ui:inputRadio component.

1<aura:component>
2    <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed Won"/>
3    <aura:iteration items="{!v.stages}" var="stage">
4     <ui:inputRadio label="{!stage}" change="{!c.onRadio}" />
5    </aura:iteration>
6   
7   <b>Selected Item:</b>
8   <p><ui:outputText class="result" aura:id="radioResult" value="" /></p>
9
10   <b>Radio Buttons - Group</b>
11   <ui:inputRadio aura:id="r0" name="others" label="Prospecting" change="{!c.onGroup}"/>
12   <ui:inputRadio aura:id="r1" name="others" label="Qualification" change="{!c.onGroup}" value="true"/>
13   <ui:inputRadio aura:id="r2" name="others" label="Needs Analysis" change="{!c.onGroup}"/>
14   <ui:inputRadio aura:id="r3" name="others" label="Closed Lost" change="{!c.onGroup}"/>
15   <b>Selected Items:</b>
16   <p><ui:outputText class="result" aura:id="radioGroupResult" value="" /></p>
17
18</aura:component>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18	onRadio: function(cmp, evt) {
19		 var elem = evt.getSource().getElement();
20		 var selected = elem.textContent;
21		 resultCmp = cmp.find("radioResult");
22		 resultCmp.set("v.value", selected);		 
23	 },
24	 
25	 onGroup: function(cmp, evt) {
26		 var elem = evt.getSource().getElement();
27		 var selected = elem.textContent;
28		 resultCmp = cmp.find("radioGroupResult");
29		 resultCmp.set("v.value", selected);
30	 }
31}

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`disabled`	Boolean	Specifies whether this radio button should be displayed in a disabled state. Disabled radio buttons can't be clicked. Default value is "false".
`label`	String	The text displayed on the component.
`labelClass`	String	The CSS class of the label component
`name`	String	The name of the component.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`text`	String	The input value attribute.
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change".
`value`	Boolean	Indicates whether the status of the option is selected. Default value is “false”.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`select`	COMPONENT	Indicates that the user has made a selection.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.