Nested checkbox group
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A 3 level permission tree where a parent ticks or clears every leaf below and shows a mixed state when only some are on
When to use
- Consent and opt-in fields, such as accepting terms or turning on a feature
- Lists where any number of options can be ticked, like notification channels or permissions
- Selectable cards and tiles for modules, people or a saved payment card
When not to use
- A hierarchy deep enough to need branches that expand and collapse: use the Tree component
- A choice where exactly 1 option of a set may be picked: use the Radio Group component
- An on or off setting that applies the moment it is flipped: use the Switch component
- A complete record entry page with many field types and a submit handler: use the Form blocks
Agent notes
datais the sample permission tree andcheckedseeds 3 ticked leaves; replace both with your own roles and grants- Only leaf ids are stored in
checked; parent state is derived throughgetLeafIds, so persist leaves only - No example passes a name to
Checkbox, so a native submit sends none of these boxes; give each one a name inside a real form - The base twin sets the mixed state with the
indeterminateprop; the radix twin passescheckedas the string indeterminate - A mixed state draws the same
CheckIconas a ticked box, as the indicator has no minus icon; add one inCheckboxto show a dash
https://reui.io/components/checkbox/c-checkbox-16.mdget_example("c-checkbox-16")npx shadcn@latest add @reui/c-checkbox-16About Shadcn Checkbox Nested Permissions
Nested checkbox group. Built by composing Checkbox, Field. A free, open source shadcn checkbox example you can install with npx shadcn@latest add @reui/c-checkbox-16 and edit as your own code.
What You Can Build With Shadcn Checkbox Nested Permissions
- Composes Checkbox, Field, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-checkbox-16
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Checkbox Examples
- Basic Basic checkbox with label
- Disabled Disabled checkbox
- Invalid Invalid checkbox
- Indeterminate Indeterminate checkbox
- Label & Description Checkbox with label and description
- Colored Colored checkbox
- Circle To-Do Circle checkbox
- Basic Group Checkbox group
- Setting Card Card checkbox with group
- Frame Group Checkbox group in a frame
- Card Rows Card checkbox group with icons
- Icon Card Rows Card checkbox group with icons
Related Shadcn Component Categories
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
Open-source shadcn color picker components for brand settings, theme editors, label colors, and design tools.
Open-source shadcn combobox components for searchable selection, async lookup, and command menus.
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Open-source shadcn context menu components for right-click menus, file actions, and table row actions.
Frequently Asked Questions
When should I use Shadcn Checkbox Nested Permissions?
Use it for a 3 level permission tree where a parent ticks or clears every leaf below and shows a mixed state when only some are on.
Shadcn Checkbox as a whole fits:
- Consent and opt-in fields, such as accepting terms or turning on a feature
- Lists where any number of options can be ticked, like notification channels or permissions
- Selectable cards and tiles for modules, people or a saved payment card
For a hierarchy deep enough to need branches that expand and collapse, use the Tree component. For a choice where exactly 1 option of a set may be picked, use the Radio Group component. For an on or off setting that applies the moment it is flipped, use the Switch component. For a complete record entry page with many field types and a submit handler, use the Form blocks.
How do I install Shadcn Checkbox Nested Permissions?
Is Shadcn Checkbox Nested Permissions free to use?
Which components does Shadcn Checkbox Nested Permissions use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.