TreeSelect – Automattic Design System

Generates a hierarchical select input.

Import

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

Props

Name	Type	Description
`noOptionLabel`	`string`	If this property is added, an option will be added with this label to represent empty selection.
`onChange`	`SelectControlSingleSelectionProps[ 'onChange' ]`	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`	`SelectControlSingleSelectionProps[ 'value' ]`	The id of the currently selected node.

Examples

Default

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

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