ComboboxControl Edit

ComboboxControl is an enhanced version of a SelectControl, with the addition of being able to search for options using a search input.

1. Design guidelines
2. Development guidelines
3. Related components

These are the same as the ones for SelectControls, but this component is better suited for when there are too many items to scroll through or load at once so you need to filter them based on user input.

import { ComboboxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const options = [
    {
        value: 'small',
        label: 'Small',
    },
    {
        value: 'normal',
        label: 'Normal',
    },
    {
        value: 'large',
        label: 'Large',
    },
];

function MyComboboxControl() {
    const [ fontSize, setFontSize ] = useState();
    const [ filteredOptions, setFilteredOptions ] = useState( options );
    return (
        <ComboboxControl
            label="Font Size"
            value={ fontSize }
            onChange={ setFontSize }
            options={ filteredOptions }
            onFilterValueChange={ ( inputValue ) =>
                setFilteredOptions(
                    options.filter( ( option ) =>
                        option.label
                            .toLowerCase()
                            .startsWith( inputValue.toLowerCase() )
                    )
                )
            }
        />
    );
}

The label for the control.

• Type: String
• Required: Yes

If true, the label will only be visible to screen readers.

• Type: Boolean
• Required: No

If this property is added, a help text will be generated using help property as the content.

• Type: String
• Required: No

The options that can be chosen from.

• Type: Array<{ value: string, label: string }>
• Required: Yes

Function called when the control’s search input value changes. The argument contains the next input value.

• Type: ( value: string ) => void
• Required: No

Function called with the selected value changes.

• Type: ( value: string | null | undefined ) => void
• Required: No

The current value of the control.

• Type: string | null
• Required: No

Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the item key, the single option’s data (directly from the array of data passed to the options prop).

• Type: ( args: { item: object } ) => ReactNode
• Required: No

• Like this component, but without a search input, the CustomSelectControl component.

• To select one option from a set, when you want to show all the available options at once, use the Radio component.

• To select one or more items from a set, use the CheckboxControl component.
• To toggle a single setting on or off, use the ToggleControl component.