I was trying to use standard ui:inputRadio with change="{!c.onRadio}" attribute, precisely as in the below example from documentation:


    <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}" />
   <b>Selected Item:</b>
   <p><ui:outputText class="result" aura:id="radioResult" value="" />

    onRadio: function(cmp, evt) {
         var elem = evt.getSource().getElement();
         var selected = elem.textContent;
         resultCmp = cmp.find("radioResult");
         resultCmp.set("v.value", selected);

It doesn't work under Locker Service, because secure DOM seems to lock ui:inputRadio component.

Error: Something has gone wrong. Action failed: c$XXX_LockerTestRadio$controller$onRadio [TypeError: evt.getSource(...).getElement is not a function] Failing descriptor: {c$XXX_LockerTestRadio$controller$onRadio}. Please try again.

Can somebody suggest if this will be solved in the framework or we should plan some workaround?

I will put a workaround in the answer to that post, however it's quite unpleasant that things copied directly from documentation do not work.

2 Answers 2


If you change the line to get the value to

var selected = event.getSource().get("v.label");

you get the correct label. Always use a published API instead of reaching inside the component to look at the DOM.

  • Ok, this works also. At some stage it would be got to update documentation. Commented Jul 6, 2016 at 16:50
  • Sorry about that. Will file a bug for that. Commented Jul 6, 2016 at 21:08

A workaround that I found would be to use standard input type="radio" html tag:


<input type="radio" name="someUniqueName" onchange="{!c.onRadio}" value="{!val}"/></td>


onRadio : function(cmp, evt) {
    var elem = evt.target;
    var selected = elem.value;

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .