enter image description hereI need to display radio button horizontally and radio button selection should work for each row but in my case the selection works for one row only. Please help

<template for:each={listOfObjects} for:item='item'>
                                    <th key={item} class="" scope="col">
                                      <div class="slds-truncate" title="Name"> 
                                        <input type="radio" name="Radiobutton" value={item} style="margin-right: 5px;" >
                                        <c-child-record-component objrec={item} fieldname={con}>

enter image description here

enter image description here

  • Are you trying to show the child record component as a table row? or inside a table cell? Please add that code as well. Where are you defining the table row? update that code as well please. Dec 4, 2020 at 7:01

1 Answer 1


You can use lightning-radio-group to create a group for each row. Aside from that, your main problem is that you did not give each "group" its own unique name. Notice how "name" is the same for every row:

<input type="radio" name="Radiobutton" value={item} style="margin-right: 5px;" >

The name should be unique for each row:

<input type="radio" name={item.Id} value={item} style="margin-right: 5px;" >

(Or some other unique value)

  • I have edited the question with another image and after using name={item.id} all radio button are getting selected. Do you have any solution for that? Please check the attachment of the latest screenshot! Dec 4, 2020 at 7:21
  • 1
    @IndreshBhargav Again, each group you intend to define needs to have its own unique name. You'll want to come up with a unique name for each group.
    – sfdcfox
    Dec 4, 2020 at 8:06
  • Thanks for your help it really worked!! Dec 4, 2020 at 9:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.