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, 2020 at 23:27
  • @TimWillis Thanks! It worked, please convert this comment to answer.
    – sfdc
    Jan 13, 2020 at 23:45

1 Answer 1


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>

You must log in to answer this question.

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