I need to build nested checkbox in lightning component, like the below image.

enter image description here

I tried to achieve this using ul and li tag but its not appearing like the image:

<lightning:layoutItem size="2">
            <lightning:input type="checkbox" name="dentures" label="Dentures:"/>
                        <lightning:input type="checkbox" name="upper" label="Upper"/>
                        <lightning:input type="checkbox" name="lower" label="Lower"/>
                        <lightning:input type="checkbox" name="partial" label="Partial"/>
  • put it in a table, the tags you are using are for lists and will be displayed in a column – Tim Willis Jan 13 '20 at 23:27
  • @TimWillis Thanks! It worked, please convert this comment to answer. – sfdc Jan 13 '20 at 23:45

The LI and UL tags are for lists and will always be displayed in a column,

you can easily achieve the desired formatting using a table such as

<td> checkbox1 </td>
<td> checkbox2 </td>
<td> checkbox3 </td>

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.