1Sponsor

Tree Select

Hierarchical tree selection

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/tree-select.json

Usage

import { TreeSelect } from "@/components/ui/tree-select";
<TreeSelect
  label="Select a file"
  nodes={[
    {
      value: "src",
      label: "src",
      children: [
        { value: "index.ts", label: "index.ts" },
        { value: "utils.ts", label: "utils.ts" },
      ],
    },
    { value: "README.md", label: "README.md" },
  ]}
  onChange={(value) => {}}
/>

API Reference

TreeSelect

PropTypeDefault
nodesTreeSelectNode<T>[]required
valueTundefined
onChange(value: T) => voidundefined
onSubmit(value: T) => voidundefined
labelstringundefined
expandedByDefaultbooleanfalse