Automattic Design System

SearchControl

SearchControl components let users display a search control.

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

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`value`		`string` The current value of the input.
`help`		`ReactNode` Additional description for the control. 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`	`false`	`boolean` Start opting into the new margin-free styles that will become the default in a future version.
`hideLabelFromVision`	`true`	`boolean` If true, the label will only be visible to screen readers.
`label`	`__( 'Search' )`	`string` The accessible label for the input. 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. 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`	`__( 'Search' )`	`string` A placeholder for the input.
`size`	`'default'`	`"default" \| "compact"` The size of the component

ExamplesPermalink to this section

DefaultPermalink to this section

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

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