Component reference
TreeSelect
Route a ticket through a hierarchical selection.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Choose the closest topic so the message reaches the right team.
Width adapts to the available space
"use client";
import { useState } from "react";
import { type PimoluTreeSelectOption, TreeSelect } from "@pimolu/react";
const descriptors: PimoluTreeSelectOption[] = [
{
value: "billing",
label: "Billing",
children: [
{ value: "invoice", label: "Invoice question" },
{ value: "refund", label: "Refund request" },
{ value: "plan", label: "Plan change" },
],
},
{
value: "account",
label: "Account",
children: [
{ value: "login", label: "Cannot sign in" },
{ value: "seats", label: "Seat management" },
{ value: "security", label: "Security review" },
],
},
{
value: "product",
label: "Product",
children: [
{ value: "bug", label: "Bug report" },
{ value: "feature", label: "Feature request" },
],
},
];
function TicketRoutingExample() {
const [descriptor, setDescriptor] = useState<PimoluTreeSelectOption | undefined>(undefined);
return (
<div className="grid gap-5 min-w-0">
<TreeSelect
label="What can we help with?"
options={descriptors}
value={descriptor?.value}
onValueChange={(_, option) => setDescriptor(option)}
placeholder="Choose a topic"
searchable
fullWidth
/>
<p className="max-w-prose leading-relaxed">
{
descriptor
? `We routed your message to the "${descriptor.label}" queue. A teammate replies within one business day.`
: "Choose the closest topic so the message reaches the right team."
}
</p>
</div>
);
}
export function DemoExample() {
return (<TicketRoutingExample />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Basic
Click the trigger to open the panel, then expand a branch. The selected label is shown on the trigger.
Controlled
value is the selected node value; onValueChange receives the value and its option.
States
Helper context outside the field, a validation error, an empty data set, a read-only selection and a disabled control.
Usage
Keep node identities stable and distinguish selectable leaves from structural groups.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTreeSelectOption
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Public Pimolu prop; see the source declaration for details. |
labelRequired | string | — | Visible label associated with the control. |
children | readonly PimoluTreeSelectOption[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Public Pimolu prop; see the source declaration for details.
labelRequiredstringNo default extracted.
Visible label associated with the control.
childrenreadonly PimoluTreeSelectOption[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
PimoluTreeSelectProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
optionsRequired | readonly PimoluTreeSelectOption[] | — | Nested options. Any node, at any depth, can be selected. |
value | string | undefined | — | Controlled selection. |
defaultValue | string | undefined | — | Initial selection when uncontrolled. |
onValueChange | ((value: string | undefined, option?: PimoluTreeSelectOption) => void) | undefined | — | Called with the new value and its option. Clearing reports `undefined` for both. |
placeholder | string | undefined | "Select an option" | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | — | Visible label associated with the control. |
error | string | undefined | — | Error text below the field. It also marks the control invalid. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
clearable | boolean | undefined | true | Public Pimolu prop; see the source declaration for details. |
searchable | boolean | undefined | false | Show a search field at the top of the panel. |
emptyMessage | string | undefined | "No options available." | Public Pimolu prop; see the source declaration for details. |
fullWidth | boolean | undefined | false | Use the available width of the parent. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
style | CSSProperties | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-label | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-labelledby | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-describedby | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
idstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
optionsRequiredreadonly PimoluTreeSelectOption[]No default extracted.
Nested options. Any node, at any depth, can be selected.
valuestring | undefinedNo default extracted.
Controlled selection.
defaultValuestring | undefinedNo default extracted.
Initial selection when uncontrolled.
onValueChange((value: string | undefined, option?: PimoluTreeSelectOption) => void) | undefinedNo default extracted.
Called with the new value and its option. Clearing reports `undefined` for both.
placeholderstring | undefinedDefault: "Select an option"
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedNo default extracted.
Visible label associated with the control.
errorstring | undefinedNo default extracted.
Error text below the field. It also marks the control invalid.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
clearableboolean | undefinedDefault: true
Public Pimolu prop; see the source declaration for details.
searchableboolean | undefinedDefault: false
Show a search field at the top of the panel.
emptyMessagestring | undefinedDefault: "No options available."
Public Pimolu prop; see the source declaration for details.
fullWidthboolean | undefinedDefault: false
Use the available width of the parent.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
styleCSSProperties | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelledbystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-describedbystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Check expansion, selection, search and disabled nodes with the keyboard.