---
name: SearchControl
package: '@wordpress/components'
category: '@wordpress-components'
status: stable
canonical: 'https://system.automattic.design/components/searchcontrol/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-searchcontrol--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/search-control'
figma: 'https://www.figma.com/design/jMgzw8IhsMC4gpMbMko4lv/WPDS--Gutenberg-22.3-?node-id=3025-46718'
---

# SearchControl

SearchControl components let users display a search control.

```tsx
import { SearchControl } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | The current value of the input. |
| `help` | `ReactNode` | — | Additional description for the control.<br>Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. |
| `__next40pxDefaultSize` | `boolean` | — |  |
| `__nextHasNoMarginBottom` | `boolean` | `false` | Start opting into the new margin-free styles that will become the default in a future version. |
| `hideLabelFromVision` | `boolean` | `true` | If true, the label will only be visible to screen readers. |
| `label` | `string` | `__( 'Search' )` | The accessible label for the input.<br>A label should always be provided as an accessibility best practice, even when a placeholder is defined and `hideLabelFromVision` is `true`. |
| `onChange` *(required)* | `(value: string) => void` | — | A function that receives the value of the input when the value is changed. |
| `onClose` | `() => void` | — | When an `onClose` callback is provided, the search control will render a close button that will trigger the given callback.<br>Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value. |
| `onDrag` | `(dragProps: Omit<FullGestureState<"drag">, "event"> & { event: unknown; }) => void` | — |  |
| `onDragStart` | `(dragProps: Omit<FullGestureState<"drag">, "event"> & { event: unknown; }) => void` | — |  |
| `onDragEnd` | `(dragProps: Omit<FullGestureState<"drag">, "event"> & { event: unknown; }) => void` | — |  |
| `placeholder` | `string` | `__( 'Search' )` | A placeholder for the input. |
| `size` | `"default" \| "compact"` | `'default'` | The size of the component |


## Examples

### Default

```tsx
const Default = ( {
	onChange,
	...props
} ) => {
	const [ value, setValue ] = useState< string >();

	return (
		<SearchControl
			{ ...props }
			value={ value }
			onChange={ ( ...changeArgs ) => {
				setValue( ...changeArgs );
				onChange( ...changeArgs );
			} }
		/>
	);
};
```