Form Tree Select

Tree select dropdown for nested categories with checkboxes and indeterminate parents.

Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.

Tree select dropdown for nested categories with checkboxes and indeterminate parents.
Hierarchical multi-select with search that opens the matching branches.
Choose a folder or category from a tree and load child nodes on demand.

For a table that shows tree rows with columns, use Table Tree Hierarchy. For ordering the chosen items matters, use Form Transfer List.

Radix UI and Base UI primitives (pick the one your project uses)
React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI

agentic-ui add form-tree-select

Installs through shadcn and adapts the component to your design tokens.

shadcn CLI

npx shadcn@4.17.0 add @agentic-ui/form-tree-select

A standalone component: drop it into any screen.

npm packages: lucide-react
Registry dependencies: lib-primitives
Files: 4 files
components/agentic-ui/form-tree-select/form-tree-select/form-tree-select.tsx
components/agentic-ui/form-tree-select/form-tree-select/tree-model.ts
components/agentic-ui/form-tree-select/form-tree-select/tree-view.tsx
components/agentic-ui/form-tree-select/form-tree-select/tree-select-parts.tsx