Tree select

A tree select is a field holding one value, where the value can sit at any depth of a hierarchy. Press the field and the popup is a tree: the whole shape indented in one column, branches that expand and collapse over their children, and every node selectable, not just the leaves. The field then shows the chosen path. It is the control a “move to folder” dialog, a category assignment, or an org unit picker is built from, and Ant Design’s TreeSelect is where most people met the name.

Three neighbours sit close enough to be confused with it, and the differences are worth stating plainly. A tree view is the widget itself, a nested expandable list that IS the page’s content: one tab stop, arrow key navigation, no field and nothing to commit. A cascader also puts a hierarchy behind a field, but it opens one level at a time in side by side columns, so you only ever see the path you are on plus its siblings. A tree select shows the whole hierarchy at once, indented, which is what lets you compare two distant branches before choosing. And a plain select is one flat list with one value, which is exactly what a tree select generalises. Add a text input that filters the tree and you have a combobox whose listbox happens to be a tree, which most implementations offer as a searchable mode rather than as a separate control.

The capability that earns the component its own name is picking a branch. In a cascader, and in most drill down interfaces, a parent is a route and only a leaf is an answer, so choosing “Marketing” is impossible even when Marketing is genuinely where the file should go. A tree select separates the two gestures: the disclosure twisty expands, the row selects, so a collapsed parent is still a valid value. That separation is the whole design, and it is where implementations go wrong most often, by making the entire row toggle expansion so a branch can never be chosen, or by making the row select so the tree cannot be explored without committing.

Two harder problems follow. The field has to show the path, not the leaf name, because “Campaigns” is ambiguous the moment two departments have one, and reopening should restore the tree scrolled and expanded to the committed node rather than collapsed to the roots. And the popup carries the full tree keyboard model on top of the field’s own: arrows to move between nodes, right and left to expand and collapse, Enter to commit, Escape to close without committing. A multiple selection variant adds a third layer, checkboxes with parent and child propagation, which is where a tree select stops being a select at all and becomes a transfer list with better geography.