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 { SearchControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

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

    return (
        <SearchControl
            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.

  • 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 only be visible to screen readers.

  • Type: Boolean
  • Required: No

Top ↑

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