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.
<ui:inputRadio label="Yes"/>
This example results in the following HTML.
<div class="uiInput uiInputRadio uiInput--default uiInput--radio"> <label class="uiLabel-left form-element__label uiLabel"> <span>Yes</span> </label> <input type="radio"> </div>
<aura:component> <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed Won"/> <aura:iteration items="{!v.stages}" var="stage"> <ui:inputRadio label="{!stage}" change="{!c.onRadio}" /> </aura:iteration> <b>Selected Item:</b> <p><ui:outputText class="result" aura:id="radioResult" value="" /></p> <b>Radio Buttons - Group</b> <ui:inputRadio aura:id="r0" name="others" label="Prospecting" change="{!c.onGroup}"/> <ui:inputRadio aura:id="r1" name="others" label="Qualification" change="{!c.onGroup}" value="true"/> <ui:inputRadio aura:id="r2" name="others" label="Needs Analysis" change="{!c.onGroup}"/> <ui:inputRadio aura:id="r3" name="others" label="Closed Lost" change="{!c.onGroup}"/> <b>Selected Items:</b> <p><ui:outputText class="result" aura:id="radioGroupResult" value="" /></p> </aura:component>
({ onRadio: function(cmp, evt) { var selected = evt.getSource().get("v.label"); resultCmp = cmp.find("radioResult"); resultCmp.set("v.value", selected); }, onGroup: function(cmp, evt) { var selected = evt.getSource().get("v.label"); resultCmp = cmp.find("radioGroupResult"); resultCmp.set("v.value", selected); } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
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". | |
errors | List | The list of errors to be displayed. | |
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”. |
Event Name | Event Type | Description |
---|---|---|
dblclick | COMPONENT | The event fired when the user double-clicks the component. |
mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
click | COMPONENT | The event fired when the user clicks on the component. |
mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |
select | COMPONENT | The event fired when the user selects some text. |
blur | COMPONENT | The event fired when the user moves off from the component. |
focus | COMPONENT | The event fired when the user focuses on the component. |
keypress | COMPONENT | The event fired when the user presses or holds down a keyboard key on the component. |
keyup | COMPONENT | The event fired when the user releases a keyboard key on the component. |
keydown | COMPONENT | The event fired when the user presses a keyboard key on the component. |
cut | COMPONENT | The event fired when the user cuts content to the clipboard. |
onError | COMPONENT | The event fired when there are any validation errors on the component. |
onClearErrors | COMPONENT | The event fired when any validation errors should be cleared. |
change | COMPONENT | The event fired when the user changes the content of the input. |
copy | COMPONENT | The event fired when the user copies content to the clipboard. |
paste | COMPONENT | The event fired when the user pastes content from the clipboard. |