Shadcn Cascader Multi-Select Cap
Multi-select permissions with checkboxes and a selection cap. Built by composing Button, Cascader, Cascader Footer, Cascader Item, Cascader Nav and 1 more. Uses cn alongside the shadcn primitives. A free, open source shadcn cascader example you can install with npx shadcn@latest add @reui/c-cascader-2 and edit as your own code.
Multi-select permissions with checkboxes and a selection cap.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Product area permissions like billing and deployments, capped at 5, with one disabled row and a clear X over the trigger and in the footer
When to use
- Form fields that commit one value from a nested tree, such as a category, region, file or department
- Picking several nodes at once, such as permissions, report columns or shipping zones with cascading checks
- Deep or large hierarchies as Miller columns, an expanding tree, an inline panel or levels fetched on demand
When not to use
- A whole area with all of its permissions taken in one press: use the Cascader Tree Multi-Select example
- A short flat list of options with no nesting: use the Select component
- A folder hierarchy browsed on the page rather than picked into a form field: use the Tree component
- A table of records whose cells are edited in place and saved together: use the Editing blocks
Agent notes
- The clear X is a sibling of
CascaderTrigger, positioned over it, because the trigger is a button; never move it inside the trigger - Parts live in separate files with no index:
CascaderItemscomes fromcascader-item, whileCascaderInputandCascaderValuecome fromcascader-nav - Give every node a
valuethat is unique across the whole tree, not only within its level; a repeatedvaluesilently drops the later row
https://reui.io/components/cascader/c-cascader-2.mdget_example("c-cascader-2")npx shadcn@latest add @reui/c-cascader-2About Shadcn Cascader Multi-Select Cap
Multi-select permissions with checkboxes and a selection cap. Built by composing Button, Cascader, Cascader Footer, Cascader Item, Cascader Nav and 1 more. Uses cn alongside the shadcn primitives. A free, open source shadcn cascader example you can install with npx shadcn@latest add @reui/c-cascader-2 and edit as your own code.
What You Can Build With Shadcn Cascader Multi-Select Cap
- Composes Button, Cascader, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-cascader-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Cascader Examples
- Attribute Picker Nested attribute picker with drill-down navigation.
- Deep Search Deep search across every level with path-annotated results.
- Footer Flyout Pinned footer with a side-anchored import flyout.
- Avatar Rows Custom rows with avatars and role badges.
- Path Formatting Trigger path formatting and collapsing.
- Embedded Panel Embedded panel without a popover.
- Flat Data Flat adjacency data with a parent pointer.
- Controlled State Controlled path, value, query and open state.
- Translated Labels Translated labels across a country picker.
- Two-Line Rows Two-line rows with descriptions and a disabled option.
- Native Form Field Form field that submits like a native input.
- Columns Mode Columns mode with independently scrolling panels.
Related Shadcn Component Categories
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
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.
Frequently Asked Questions
When should I use Shadcn Cascader Multi-Select Cap?
Use it for product area permissions like billing and deployments, capped at 5, with one disabled row and a clear X over the trigger and in the footer.
Shadcn Cascader as a whole fits:
- Form fields that commit one value from a nested tree, such as a category, region, file or department
- Picking several nodes at once, such as permissions, report columns or shipping zones with cascading checks
- Deep or large hierarchies as Miller columns, an expanding tree, an inline panel or levels fetched on demand
For a whole area with all of its permissions taken in one press, use the Cascader Tree Multi-Select example. For a short flat list of options with no nesting, use the Select component. For a folder hierarchy browsed on the page rather than picked into a form field, use the Tree component. For a table of records whose cells are edited in place and saved together, use the Editing blocks.
How do I install Shadcn Cascader Multi-Select Cap?
Is Shadcn Cascader Multi-Select Cap free to use?
Which components does Shadcn Cascader Multi-Select Cap 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.