Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA hierarchy picker that shows one level at a time in a popover, with a Back button, the path in the header, a searchable list and lazy-loaded children. Use this when a cascader's columns do not fit, as on a phone.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for location, category and department pickers on narrow screens and in side panels, where one column at a time is easier to read and touch than several side by side.
Do not use it when there is room for columns and people compare siblings across levels. Use a cascader.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | { id, label, children?, isLeaf? }[] | - | The root level. |
loadChildren | (node) => Promise<Node[]> | - | Loads the children of a node that has none and is not a leaf. |
value | { id, label }[] | - | The chosen path (controlled). |
defaultValue | { id, label }[] | [] | Initial path. |
onValueChange | (path) => void | - | Runs when a leaf is chosen. |
placeholder | string | Choose… | Button text while empty. |
combobox; its name is the chosen path.Europe › Germany); a Back button and Backspace in an empty search go up.Germany, 16 options or Back to Europe; loading is announced.opens in text, not only with a chevron.The pattern ships with a Testing Library test (mobile-drill-down-picker.test.tsx) that covers drilling in and back, choosing a leaf, lazy loading and the Backspace shortcut.