I want to build something like this in the lightning component:

enter image description here

  1. When "Main Heading" is checked then all option under it - "Sub Heading 1" and "Sub Heading 2" should be checked with their sub-options ("Sub Heading1 Child Option1", "Sub Heading2 Child Option 1" etc.) If they all are checked then unchecking any "sub heading" and "sub heading" child options should uncheck the "Main Heading" checkbox.

  2. When "Sub Heading 1" is checked then it related sub-options should be checked. And same for "Sub Heading 2". Unchecking any of the child sub-options should uncheck the selected "Sub Heading".

So what would be the good architecture for this kind of requirement? The level of "Sub Heading" and "Sub Heading Child Option" is not fixed; they can be with any number of level in the hierarchy.


2 Answers 2


You should use recursive methods and get help from a lightning tree component like this:

Lightning Tree


For main heading you should use design attributes in your component and use them as you need. This question might help you getting started with design attribute.

<Design:Attribute> Documentation

And for sub headings you should define your own logic to check child checkbook in JavaScript controller.

  • I think you miss the context of the question. I am looking for architect suggestions rather than user oriented options for which Design attributes are mainly used. Commented Mar 20, 2017 at 2:44

You must log in to answer this question.

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