Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Checkbox - Nested List
A React nested checkbox list with parent-child relationships where parent controls all children for hierarchical selections using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Select-all controls need to show what they're selecting. This React nested checkbox list creates parent-child hierarchy where clicking parent checks or unchecks all children, and children affect parent state. Built with shadcn/ui using useState tracking each checkbox independently with handleParentChange synchronizing children. The ml-6 indentation visually nests children under parent, font-semibold distinguishes parent importance. Perfect for feature bundles, permission groups, category-based selections, or any interface where options have hierarchical relationships requiring coordinated selection.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Indeterminate Checkbox
Three-state checkbox for partial selection
Vertical List Checkbox
Flat list without nesting
Simple Checkbox
Basic single checkbox
Todo-Style Checkbox
Task completion lists
Horizontal List Checkbox
Inline checkbox flow
Data Table
Row selection with checkboxes
Questions you might have
React Checkbox - With Subtitle and Description
A React checkbox combining inline subtitle badge and multi-line description for maximum context like Recommended settings using shadcn/ui
React Indeterminate Checkbox
A React checkbox with indeterminate state for partial selections like select-all controls using shadcn/ui and Radix UI