Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Indeterminate Checkbox
A React checkbox with indeterminate state for partial selections like select-all controls using shadcn/ui and Radix UI
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Checkboxes aren't just checked or unchecked—sometimes they're both. This React indeterminate checkbox uses a three-state model (checked, unchecked, indeterminate) perfect for select-all scenarios where some but not all child items are selected. Built with shadcn/ui and Radix UI using the checked prop with boolean or indeterminate string value. The minus icon visually indicates partial selection. Perfect for hierarchical lists, batch operations, or any interface where parent checkboxes represent groups of child selections.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Basic two-state checkbox
Nested List Checkbox
Parent-child checkbox hierarchies
Vertical List Checkbox
Multiple checkboxes in list
Data Table
Tables with row selection
Todo-Style Checkbox
Task completion checkboxes
Disabled Checkbox
Non-interactive states
Questions you might have
React Checkbox - Nested List
A React nested checkbox list with parent-child relationships where parent controls all children for hierarchical selections using shadcn/ui
React Checkbox - With Subtitle
A React checkbox with inline subtitle badge providing additional context like Recommended or Optional using shadcn/ui