TreeSelect

Code

Install

Import

The axes

• variant takes outlined (the default), filled, borderless and underlined. Inherited from ConfigProvider when unset, which is how a whole form picks one.
• size takes small, medium (the default) and large. middle is the older spelling of medium. A Space.Compact around the field overrides it.
• status takes error and warning, and nothing else. Form.Item sets it for you, so writing it by hand usually means the validation lives somewhere it should not.
• placement takes bottomLeft, bottomRight, topLeft and topRight, defaulting to bottomLeft and to bottomRight under RTL.
• showCheckedStrategy takes SHOW_CHILD (the default), SHOW_PARENT and SHOW_ALL, all three on TreeSelect so TreeSelect.SHOW_PARENT needs no second import. It changes the value rather than the look.
• treeExpandAction takes false (the default), click and doubleClick: what opens a branch besides the switcher itself.

Flags

• multiple gives tags instead of one value. Forced on by treeCheckable, which warns in development if you pass multiple={false} beside it.
• treeCheckable adds checkboxes and the parent/child cascade. Typed as boolean | React.ReactNode, but any truthy value draws the standard checkbox, so treat it as a boolean.
• treeCheckStrictly breaks the cascade and turns labelInValue on: the value becomes { value, label } entries and may carry halfChecked. This is the one that breaks code rather than layout.
• labelInValue does that shape change on its own, without touching the checking behavior.
• treeDefaultExpandAll opens everything on mount. Fine on a demo, a performance trap on a real tree: prefer treeExpandedKeys with onTreeExpand.
• virtual is on by default and windows the popup's rows. It turns itself off when popupMatchSelectWidth is false, so pair it with a listHeight and leave the width alone.
• treeLine draws the connecting lines, and takes { showLeafIcon } as well as a boolean.
• treeIcon shows each node's own icon field. Without it the icons are data nobody sees.
• disabled takes the whole field out of the tab order. Disabling single nodes (disabled, disableCheckbox or checkable: false on the node) is usually the better answer.

Slots

• suffixIcon, the trigger arrow, and removeIcon, the × on a tag. Both default to the icon pack. Pass null as suffixIcon to hide the arrow. A null removeIcon shows a plain × instead of an icon.
• allowClear takes true or { clearIcon }, as on Select, and the clear icon defaults to the pack's close icon. The same object takes label, which is the button's accessible name.
• switcherIcon takes a node or a function of { expanded }. The provider's default is the function form, so the arrow can turn as a branch opens.
• treeTitleRender replaces a row's title in the popup. It does not change what the closed field shows: that is treeNodeLabelProp.
• popupRender wraps the whole popup, for a footer or a hint above the tree. notFoundContent replaces the empty state inside it.
• tagRender and maxTagPlaceholder own the tags under multiple. Take tagRender and you own the remove affordance and its accessible name too.
• prefix and placeholder sit inside the closed field.

Events

• onChange fires with the whole value. Its second argument, the label list, is null once the value is labeled, because the labels are then inside the value.
• onSelect and onDeselect fire per node, with the node itself, and not for the cascade under a checked parent.
• onTreeExpand fires with the whole expanded set, which is what a controlled treeExpandedKeys is written from.
• onTreeLoad fires after loadData resolves, with the full loaded set.
• onOpenChange is the popup's open callback. onPopupVisibleChange is the base Select's older one and onDropdownVisibleChange is deprecated: prefer onOpenChange in new code.
• onClear fires beside onChange when the clear button is used, which is how you tell an emptied field from an unset one.

Styling