Shadcn.io is not affiliated with official shadcn/ui
Nested List
A React nested checkbox list with parent-child relationships where parent controls all children for hierarchical selections using shadcn/ui
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.
Nested List preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
With Subtitle and Description
A React checkbox combining inline subtitle badge and multi-line description for maximum context like Recommended settings using shadcn/ui
Indeterminate Checkbox
A React checkbox with indeterminate state for partial selections like select-all controls using shadcn/ui and Radix UI