---
name: TreeSelect
package: '@wordpress/components'
category: Forms
status: stable
canonical: 'https://system.automattic.design/components/treeselect/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-treeselect--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/tree-select'
---

# TreeSelect

Generates a hierarchical select input.

```tsx
import { TreeSelect } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `noOptionLabel` | `string` | — | If this property is added, an option will be added with this label to represent empty selection. |
| `onChange` | `(value: string, extra?: { event?: ChangeEvent<HTMLSelectElement> \| undefined; } \| undefined) => void` | — | A function that receives the value of the new option that is being selected as input. |
| `tree` | `Tree[]` | `[]` | An array containing the tree objects with the possible nodes the user can select. |
| `selectedId` | `string` | — | The id of the currently selected node. |
| `label` | `ReactNode` | — | If this property is added, a label will be generated using label property as the content. |
| `children` | `ReactNode` | — | As an alternative to the `options` prop, `optgroup`s and `options` can be passed in as `children` for more customizability. |
| `disabled` | `boolean` | `false` | If true, the `input` will be disabled. |
| `prefix` | `ReactNode` | — | Renders an element on the left side of the input.<br>By default, the prefix is aligned with the edge of the input border, with no padding. If you want to apply standard padding in accordance with the size variant, wrap the element in the provided `} /> ``` |
| `__next40pxDefaultSize` | `boolean` | — | Start opting into the larger default height that will become the default size in a future version. |
| `size` | `"small" \| "default" \| "compact"` | `'default'` | Adjusts the size of the input. |
| `variant` | `"default" \| "minimal"` | `'default'` | The style variant of the control. |
| `suffix` | `ReactNode` | — | Renders an element on the right side of the input.<br>By default, the suffix is aligned with the edge of the input border, with no padding. If you want to apply standard padding in accordance with the size variant, wrap the element in the provided `} /> ``` |
| `help` | `ReactNode` | — | Additional description for the control.<br>Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. |
| `__nextHasNoMarginBottom` | `boolean` | — | Start opting into the new margin-free styles that will become the default in a future version. |
| `hideLabelFromVision` | `boolean` | `false` | If true, the label will only be visible to screen readers. |
| `__next36pxDefaultSize` | `boolean` | `false` | Deprecated. Use `__next40pxDefaultSize` instead. |
| `options` | `readonly ({ label: string; value: string; } & Omit<OptionHTMLAttributes<HTMLOptionElement>, "label" \| "value">)[]` | — | An array of option property objects to be rendered, each with a `label` and `value` property, as well as any other `<option>` attributes. |
| `labelPosition` | `"top" \| "bottom" \| "side" \| "edge"` | `'top'` | The position of the label. |


## Examples

### Default

```tsx
const Default = ( props ) => {
	const [ selection, setSelection ] =
		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();

	return (
		<TreeSelect
			{ ...props }
			onChange={ setSelection }
			selectedId={ selection }
		/>
	);
};
```