Radio Button is not working when using same component twice on same page in lightning

Question

I am facing an issue in which I am creating a lightning component with "lightning:input type = "radio". All is working fine but this is not working if I am using the same component twice on the same lightning page.

On both, only one component radio button is checked true. And when click one another get disappear. And I am not sure how I can prevent this.

<div class="slds-col slds-grid slds-grid_align-spread outer-div2 " style="position:relative;width:100%">
            <div class = "slds-col  ">
                <lightning:input aura:id="allRadio" type="radio" label="All" value = "allRadio" name = "options" checked = "true" onchange="{!c.init}"/>
            </div>
            <div class = "slds-col ">
                <lightning:input type="radio" label="Priority" value = "priority" name = "options" onchange="{!c.priorInit}"/>
                <lightning:radioGroup name="radioGroup"
                                      label="Radio Group"
                                      options="{! v.options }"
                                      value="{! v.value }"
                                      type="radio"/>

            </div>
        </div>

I have tried radiogroup as well. But get no luck!!

Any help will be helpful.

Answer 1

The name is supposed to link all radio group items together. This is standard HTML behavior. Since the name is always the same, the browser thinks these inputs all belong to the same "group."

Instead, you should generate a unique name for each component. Try:

<lightning:radioGroup name="{!globalId+'_radioGroup'}"
                      label="Radio Group"
                      options="{! v.options }"
                      value="{! v.value }"
                      type="radio"/>