SearchControl 
Edit
SearchControl components let users display a search control.
Table of contents Table of contents
Development guidelines Development guidelines
Usage 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 }
/>
);
}
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 input element.
label label
If this property is added, a label will be generated using label property as the content.
- Type:
String - Required: Yes
placeholder placeholder
If this property is added, a specific placeholder will be used for the input.
- Type:
String - Required: No
value value
The current value of the input.
- Type:
String | Number - Required: Yes
className className
The class that will be added to the classes of the wrapper div.
- Type:
String - Required: No
onChange onChange
A function that receives the value of the input.
- Type:
function - Required: Yes
help help
If this property is added, a help text will be generated using help property as the content.
- Type:
String|WPElement - Required: No
hideLabelFromVision hideLabelFromVision
If true, the label will only be visible to screen readers.
- Type:
Boolean - Required: No
Related components Related components
- To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.