A dropdown select whose options are organized as a hierarchy, like teams inside departments or categories inside a catalogue, with search and tri-state checkbox multi-select.
"use client";
import { TreeSelect, type TreeSelectNode } from "@/components/ui/tree-select";
const departments: TreeSelectNode[] = [
{
id: "engineering",
label: "Engineering",
children: [
{ id: "eng-platform", label: "Platform" },
{ id: "eng-frontend", label: "Frontend" },
{ id: "eng-mobile", label: "Mobile" },
{ id: "eng-infra", label: "Infrastructure" },
],
},
{
id: "design",
label: "Design",
children: [
{ id: "design-product", label: "Product Design" },
{ id: "design-brand", label: "Brand" },
],
},
{
id: "data",
label: "Data",
children: [
{ id: "data-science", label: "Data Science" },
{ id: "data-eng", label: "Data Engineering" },
{ id: "data-analytics", label: "Analytics", disabled: true },
],
},
];
export default function TreeSelectDemo() {
return (
<div className="flex min-h-[360px] w-full items-start justify-center bg-background p-10 text-foreground">
<TreeSelect
nodes={departments}
multiple
label="Notify teams"
defaultValue={["eng-platform", "eng-frontend", "data-science"]}
defaultExpanded={["engineering"]}
/>
</div>
);
}
