Select with hierarchical tree data
TreeSelect allows picking one or more values from hierarchical tree data. It supports three selection modes: single, multiple, and checkbox (with parent-child cascade).
Data passed to the data prop must follow the same rules as the Tree component:
TreeSelect supports three selection modes controlled by the mode prop:
In checkbox mode, checking a parent node automatically checks all its children. Unchecking a parent unchecks all children. If only some children are checked, the parent shows an indeterminate state.
Set the searchable prop to allow filtering options by user input. When searching, matching nodes and their ancestors are shown:
Set the nothingFoundMessage prop to display a given message when no options match the search query or there is no data available:
Set the clearable prop to display the clear button in the right section:
Set the expandOnClick prop to also toggle expansion when clicking a parent node (in addition to the chevron). Behavior depends on the selection mode:
TreeSelect renders connecting lines between parent and child nodes by default. Set withLines={false} to disable them:
Set checkStrictly to disable parent-child cascade in checkbox mode. Each node's checked state becomes fully independent:
The checkedStrategy prop controls which checked nodes appear in the value and pills in checkbox mode:
Set the maxValues prop to limit the number of selected values in multiple and checkbox modes:
The renderNode callback allows you to customize node rendering in the dropdown. It is called with an object containing node , level , expanded , hasChildren , selected , checked , indeterminate and expand properties:
The payload also includes an expand function that toggles the expanded state of the node. Use it to build a custom expand control inside renderNode without controlling the expanded state externally. Set expandOnClick={false} if you want expanding to happen only through your custom control:
By default, the options list is wrapped with ScrollArea.Autosize . You can control the dropdown max-height with the maxDropdownHeight prop:
You can override Combobox props with comboboxProps . This is useful when you need to change some of the props that are not exposed by TreeSelect , for example withinPortal :
You can control the dropdown opened state with the dropdownOpened prop. Additionally, you can use onDropdownClose and onDropdownOpen to listen to dropdown opened state changes.
By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input. You can change this behavior by setting the position and middlewares props, which are passed down to the underlying Popover component.
Example of a dropdown that is always displayed above the input:
To change the dropdown width, set the width prop in comboboxProps . By default, the dropdown width is equal to the input width.
To change the dropdown offset, set the offset prop in comboboxProps :
By default, dropdown animations are disabled. To enable them, you can set transitionProps , which will be passed down to the underlying Transition component.
TreeSelect supports the following keyboard interactions when the dropdown is open:
You can control the expanded state of nodes:
TreeSelect supports leftSection and rightSection props. These sections are rendered with absolute positioning inside the input wrapper. You can use them to display icons, input controls, or any other elements.
You can use the following props to control sections styles and content:
TreeSelect component supports Input and Input.Wrapper component features and all input element props. The TreeSelect documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set readOnly to make the input read only. When readOnly is set, TreeSelect will not show suggestions and will not call the onChange function.
Set disabled to disable the input. When disabled is set, the user cannot interact with the input and TreeSelect will not show suggestions.
If TreeSelect is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
To set aria-label on the clear button, use clearButtonProps . Note that this is required only when clearable is set.