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". Alternatively, value can take in a value from a model.

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputRadio value="true" label="Select?" labelPosition="right" />

1swfobject.registerObject("clippy.codeblock-1", "9");<!--Initializing with a model-->
2<ui:inputRadio aura:id="inRadio" value="{!m.selected}"/>
3<!--The model-->
4public Boolean getSelected() {
5    return true;
6}

The model is in a Java class specified by the model attribute on the aura:component tag.

Disabled State

1swfobject.registerObject("clippy.codeblock-2", "9");<ui:inputRadio label="Select" disabled="true" labelPosition="left" />

The previous example results in the following HTML.

1<label class="uiLabel-left uiLabel" for="globalId"><span>Select</span></label>
2<input type="radio" id="globalId" class="uiInput uiInputRadio">

1swfobject.registerObject("clippy.codeblock-4", "9");<!--The radio button-->
2    <ui:inputRadio click="{!c.showItem}" label="Show Item" labelPosition="right"/>
3    
4    <!--The controller action-->
5    showItem : function(cmp, event) {
6        var elem = cmp.find('componentID');
7        $A.util.toggleClass(elem, "cssClass");
8    }