Search input

A search input is a type of input field that can be user to search, find, or filter. See filter guidelines for more information on using search input as a filter.



Match with result count

Match with navigable options

With submit button

Focus search input using ref

With expandable button


The search input component can be used to dynamically build a one to one attribute-value advanced search. Using the attributes prop alongside the advancedSearchDelimiter will expose this functionality, as demonstrated in the following example. The search input component can also be used as a composable component and paired with a Popper or other elements to build a completely custom advanced search form. This feature is demonstrated in the search input's react demos.

The values used in the attribute-value form fields may contain spaces. The values containing spaces should be wrapped with quotes inside the summary search string in the input field. If the latter is autogenerated from the individual fields the quotes will be autoplaced.



The main search input component.
advancedSearchDelimiterstringDelimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
appendToHTMLElement | (() => HTMLElement) | 'inline'The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')}
aria-labelstringAn accessible label for the search input.
attributesstring[] | SearchInputSearchAttribute[]Array of attribute values used for dynamically generated advanced search.
classNamestringAdditional classes added to the search input.
expandableInputSearchInputExpandableObject that makes the search input expandable/collapsible.
hasWordsAttrLabelReact.ReactNodeAttribute label for strings unassociated with one of the provided listed attributes.
hintstringA suggestion for autocompleting.
isAdvancedSearchOpenbooleanA flag for controlling the open state of a custom advanced search implementation.
isDisabledbooleanFlag indicating if search input is disabled.
isNextNavigationButtonDisabledbooleanFlag indicating if the next navigation button is disabled.
isPreviousNavigationButtonDisabledbooleanFlag indicating if the previous navigation button is disabled.
namestringName attribue for the search input
nextNavigationButtonAriaLabelstringAccessible label for the button to navigate to next result.
onChange(event: React.FormEvent<HTMLInputElement>, value: string) => voidA callback for when the input value changes.
onClear(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks the clear button.
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks to navigate to next result.
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks to navigate to previous result.
onSearch( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => voidA callback for when the search button is clicked.
onToggleAdvancedSearch(event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => voidA callback for when the open advanced search button is clicked.
openMenuButtonAriaLabelstringAccessible label for the button which opens the advanced search form menu.
placeholderstringPlaceholder text of the search input.
previousNavigationButtonAriaLabelstringAccessible label for the button to navigate to previous result.
resetButtonLabelstringLabel for the button which resets the advanced search form and clears the search input.
resultsCountnumber | stringThe number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5".
submitSearchButtonLabelstringLabel for the button which calls the onSearch event handler.
valuestringValue of the search input.
zIndexnumberz-index of the advanced search form when appendTo is not inline.


Properties for adding search attributes to an advanced search input. These properties must be passed in as an object within an array to the search input component's attribute properrty.
attrrequiredstringThe search attribute's value to be provided in the search input's query string. It should have no spaces and be unique for every attribute.
displayrequiredReact.ReactNodeThe search attribute's display name. It is used to label the field in the advanced search menu.


Properties for creating an expandable search input. These properties should be passed into the search input component's expandableInput property.
isExpandedrequiredbooleanFlag to indicate if the search input is expanded.
onToggleExpandrequired(event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => voidCallback function to toggle the expandable search input.
toggleAriaLabelrequiredstringAn accessible label for the expandable search input toggle.

CSS variables


View source on GitHub