Search input

Examples

Basic

Match with result count

Match with navigable options

With submit button

Focus search input using ref

With expandable button

Animations on the expansion and collapse of the search input may be opted into by passing hasAnimations to the expandableInput object.

Advanced

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.

Use equal sign as search attribute delimiter

Add custom footer element after the attributes in the menu

Props

SearchInput

*required
Name	Type	Default	Description
advancedSearchDelimiter	string		Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
attributes	string[] \| SearchInputSearchAttribute[]	[]	Array of attribute values used for dynamically generated advanced search.
className	string		Additional classes added to the advanced search menu.
formAdditionalItems	React.ReactNode
getAttrValueMap	() => { [key: string]: string }		Function which builds an attribute-value map by parsing the value in the search input.
hasWordsAttrLabel	React.ReactNode	'Has words'	Attribute label for strings unassociated with one of the provided listed attributes.
isSearchMenuOpen	boolean		Flag for toggling the open/close state of the advanced search menu.
onChange	(event: React.FormEvent<HTMLInputElement>, value: string) => void		A callback for when the input value changes.
onClear	(event: React.SyntheticEvent<HTMLButtonElement>) => void		A callback for when the user clicks the clear button.
onSearch	( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void		A callback for when the search button is clicked.
onToggleAdvancedMenu	(e: React.SyntheticEvent<HTMLButtonElement>) => void		A callback for when the open advanced search button is clicked.
parentInputRef	React.RefObject<any>		Ref of the input element within the search input.
parentRef	React.RefObject<any>		Ref of the div wrapping the whole search input.
resetButtonLabel	string	'Reset'	Label for the button which resets the advanced search form and clears the search input.
submitSearchButtonLabel	string	'Search'	Label for the button which calls the onSearch event handler.
value	string	''	Value of the search input.

SearchInputSearchAttribute

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 property.
*required
Name	Type	Default	Description
attrrequired	string		The 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.
displayrequired	React.ReactNode		The search attribute's display name. It is used to label the field in the advanced search menu.

SearchInputExpandable

Properties for creating an expandable search input. These properties should be passed into the search input component's expandableInput property.
*required
Name	Type	Description
isExpandedrequired	boolean	Flag to indicate if the search input is expanded.
onToggleExpandrequired	(event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void	Callback function to toggle the expandable search input.
toggleAriaLabelrequired	string	An accessible label for the expandable search input toggle.
hasAnimations	boolean	Flag indicating animations should be enabled when the search input expands and collapses. Note: this will change the component's DOM structure. In a future breaking change release, this will become the default behavior and will no longer be needed.

CSS variables

Expand or collapse column	Selector	Variable	Value

Edit this page on GitHub