WordPress.org

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 { withState } from '@wordpress/compose';

const MyTreeSelect = withState( {
    page: 'p21',
} )( ( { page, setState } ) => (
    <TreeSelect
        label="Parent page"
        noOptionLabel="No parent page"
        onChange={ ( page ) => setState( { page } ) }
        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',
                            },
                        ],
                    },
                ],
            },
        ] }
    />
) );

Top ↑

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

Top ↑

noOptionLabel noOptionLabel

If this property is added, an option will be added with this label to represent empty selection.

  • Type: String
  • Required: No

Top ↑

onChange onChange

A function that receives the id of the new node element that is being selected.

  • Type: function
  • Required: Yes

Top ↑

selectedId selectedId

The id of the currently selected node.

  • Type: Object
  • Required: No

Top ↑

tree tree

An array containing the tree objects with the possible nodes the user can select.

  • Type: String
  • Required: No
Skip to toolbar