SearchControl Edit

SearchControl components let users display a search control.

Table of contents

  1. Development guidelines
  2. Related components

Top ↑

Development guidelines

Top ↑

Usage

Render a user interface to input the name of an additional css class.

import { __ } from '@wordpress/i18n';
import { SearchControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MySearchControl( { className, setState } ) {
    const [ searchInput, setSearchInput ] = useState( '' );

    return (
        <SearchControl
            label={ __( 'Search posts' ) }
            value={ searchInput }
            onChange={ setSearchInput }
        />
    );
}

Top ↑

Props

The set of props accepted by the component will be specified below.
Props not included in this set will be applied to the input element.

Top ↑

label

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

A label should always be provided as an accessibility best practice, even when a placeholder is defined
and hideLabelFromVision is true.

  • Type: String
  • Required: Yes

Top ↑

placeholder

If this property is added, a specific placeholder will be used for the input.

  • Type: String
  • Required: No
  • Default: __( 'Search' )

Top ↑

value

The current value of the input.

  • Type: String
  • Required: No

Top ↑

className

The class that will be added to the classes of the wrapper div.

  • Type: String
  • Required: No

Top ↑

onChange

A function that receives the value of the input.

  • Type: function
  • Required: Yes

Top ↑

help

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

  • Type: String|WPElement
  • Required: No

Top ↑

hideLabelFromVision

If true, the label will not be visible, but will be read by screen readers. Defaults to true.

  • Type: Boolean
  • Required: No

Top ↑

size: 'default' | 'compact'

The size of the component.

  • Required: No
  • Default: 'default'

Top ↑

  • To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.