TreeSelect Edit
TreeSelect component is used to generate select input fields.
Usage Usage
Render a user interface to select the parent page in a hierarchy of pages:
import { TreeSelect } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyTreeSelect = () => { const [ page, setPage ] = useState( 'p21' ); return ( <TreeSelect label="Parent page" noOptionLabel="No parent page" onChange={ ( newPage ) => setPage( newPage ) } selectedId={ page } tree={ [ { name: 'Page 1', id: 'p1', children: [ { name: 'Descend 1 of page 1', id: 'p11' }, { name: 'Descend 2 of page 1', id: 'p12' }, ], }, { name: 'Page 2', id: 'p2', children: [ { name: 'Descend 1 of page 2', id: 'p21', children: [ { name: 'Descend 1 of Descend 1 of page 2', id: 'p211', }, ], }, ], }, ] } /> ); }
Props Props
The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the SelectControl component being used.
label label
If this property is added, a label will be generated using label property as the content.
- Type:
String
- Required: No
noOptionLabel noOptionLabel
If this property is added, an option will be added with this label to represent empty selection.
- Type:
String
- Required: No
onChange onChange
A function that receives the id of the new node element that is being selected.
- Type:
function
- Required: Yes
selectedId selectedId
The id of the currently selected node.
- Type:
Object
- Required: No
tree tree
An array containing the tree objects with the possible nodes the user can select.
- Type:
String
- Required: No