How can I bind attribute to result of lightning:input type="radio"

I have tried the following

<aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
<aura:attribute name="selectResult" type="Boolean[]" default="false, false, false"/>
<lightning:input type="radio" name="select" label="{!v.colors[0]}"  checked="{!v.selectResult[0]}"/>
<lightning:input type="radio" name="select" label="{!v.colors[1]}"  checked="{!v.selectResult[1]}"/>
<lightning:input type="radio" name="select" label="{!v.colors[2]}"  checked="{!v.selectResult[2]}"/>


But the results are not updated after the value is unchecked, so after clicking on all three radio's all results will be set as true

I have also tried to use


but this ends up with empty attribute

2 Answers 2


Sadly this isn't possible. you need:

<lightning:input type="radio" name="select" value="{!v.colors[0]}" label="{!v.colors[0]}" onchange="{!c.handleRadioClick}" />
<lightning:input type="radio" name="select" value="{!v.colors[1]}" label="{!v.colors[1]}" onchange="{!c.handleRadioClick}" />
<lightning:input type="radio" name="select" value="{!v.colors[2]}" label="{!v.colors[2]}" onchange="{!c.handleRadioClick}" />

then in your controller

handleRadioClick : function(cmp, evt, helper){
     cmp.set('v.selectedOption', evt.getSource().get('v.value'));

You can do as this:

<ui:inputRadio name="gender" class="slds-float--left" label="{!selectedGender.label}"
                                   labelClass="slds-radio__label slds-m-right--x-large"

and for the change event you can pass code as:`onGenderSelect : function(component, event, helper) {

    var selectedGender = event.source.get("v.label");
    var objcontactDetails = component.get('v.contactDetails');
    console.log('Selected value is : ',objcontactDetails );

},  `

Try this and if this works you can mark it as the best answer.

You must log in to answer this question.

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