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.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

Match with result count

Match with navigable options

With submit button

Focus search input using ref

With expandable button

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

The main search input component.
*required
Name	Type	Description
advancedSearchDelimiter	string	Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
appendTo	HTMLElement \| (() => 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-label	string	An accessible label for the search input.
attributes	string[] \| SearchInputSearchAttribute[]	Array of attribute values used for dynamically generated advanced search.
className	string	Additional classes added to the search input.
expandableInput	SearchInputExpandable	Object that makes the search input expandable/collapsible.
formAdditionalItems	React.ReactNode
hasWordsAttrLabel	React.ReactNode	Attribute label for strings unassociated with one of the provided listed attributes.
hint	string	A suggestion for autocompleting.
isAdvancedSearchOpen	boolean	A flag for controlling the open state of a custom advanced search implementation.
isDisabled	boolean	Flag indicating if search input is disabled.
isNextNavigationButtonDisabled	boolean	Flag indicating if the next navigation button is disabled.
isPreviousNavigationButtonDisabled	boolean	Flag indicating if the previous navigation button is disabled.
name	string	Name attribue for the search input
nextNavigationButtonAriaLabel	string	Accessible label for the button to navigate to next result.
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.
onNextClick	(event: React.SyntheticEvent<HTMLButtonElement>) => void	A callback for when the user clicks to navigate to next result.
onPreviousClick	(event: React.SyntheticEvent<HTMLButtonElement>) => void	A callback for when the user clicks to navigate to previous result.
onSearch	( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void	A callback for when the search button is clicked.
onToggleAdvancedSearch	(event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void	A callback for when the open advanced search button is clicked.
openMenuButtonAriaLabel	string	Accessible label for the button which opens the advanced search form menu.
placeholder	string	Placeholder text of the search input.
previousNavigationButtonAriaLabel	string	Accessible label for the button to navigate to previous result.
removeFindDomNodeBeta	boolean	Opt-in for updated popper that does not use findDOMNode.
resetButtonLabel	string	Label for the button which resets the advanced search form and clears the search input.
resultsCount	number \| string	The 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".
submitSearchButtonLabel	string	Label for the button which calls the onSearch event handler.
type	'text' \| 'date' \| 'datetime-local' \| 'email' \| 'month' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'time' \| 'url'	Type of the input
value	string	Value of the search input.
zIndex	number	z-index of the advanced search form when appendTo is not inline.

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 properrty.
*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.

CSS variables


	.pf-c-search-input	--pf-c-search-input__text--before--BorderWidth	1px
--pf-c-search-input__text--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-search-input	--pf-c-search-input__text--before--BorderColor	#f0f0f0
--pf-c-search-input__text--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-search-input	--pf-c-search-input__text--after--BorderBottomWidth	1px
--pf-c-search-input__text--after--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-search-input	--pf-c-search-input__text--after--BorderBottomColor	#8a8d90
--pf-c-search-input__text--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-search-input	--pf-c-search-input__bar--hover__text--after--BorderBottomColor	#06c
--pf-c-search-input__bar--hover__text--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-search-input	--pf-c-search-input__text--focus-within--after--BorderBottomWidth	2px
--pf-c-search-input__text--focus-within--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-search-input	--pf-c-search-input__text--focus-within--after--BorderBottomColor	#06c
--pf-c-search-input__text--focus-within--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-search-input	--pf-c-search-input__text-input--PaddingTop	0.375rem
--pf-c-search-input__text-input--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-search-input	--pf-c-search-input__text-input--PaddingRight	0.5rem
--pf-c-search-input__text-input--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__text-input--PaddingBottom	0.375rem
--pf-c-search-input__text-input--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-search-input	--pf-c-search-input__text-input--PaddingLeft	2rem
--pf-c-search-input__text-input--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-search-input	--pf-c-search-input__text-input--MinWidth	6ch
	.pf-c-search-input	--pf-c-search-input__text-input--m-hint--Color	#6a6e73
--pf-c-search-input__text-input--m-hint--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-search-input	--pf-c-search-input__icon--Left	0.5rem
--pf-c-search-input__icon--Left --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__icon--Color	#6a6e73
--pf-c-search-input__icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-search-input	--pf-c-search-input__text--hover__icon--Color	#151515
--pf-c-search-input__text--hover__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-search-input	--pf-c-search-input__icon--TranslateY	-50%
	.pf-c-search-input	--pf-c-search-input__utilities--MarginRight	0.5rem
--pf-c-search-input__utilities--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__utilities--MarginLeft	0.25rem
--pf-c-search-input__utilities--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input	--pf-c-search-input__utilities--child--MarginLeft	0.25rem
--pf-c-search-input__utilities--child--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input	--pf-c-search-input__utilities--c-button--PaddingRight	0.25rem
--pf-c-search-input__utilities--c-button--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input	--pf-c-search-input__utilities--c-button--PaddingLeft	0.25rem
--pf-c-search-input__utilities--c-button--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input	--pf-c-search-input__menu-body--PaddingTop	1rem
--pf-c-search-input__menu-body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu-body--PaddingRight	1rem
--pf-c-search-input__menu-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu-body--PaddingBottom	1rem
--pf-c-search-input__menu-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu-body--PaddingLeft	1rem
--pf-c-search-input__menu-body--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu--BackgroundColor	#fff
--pf-c-search-input__menu--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-search-input	--pf-c-search-input__menu--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-c-search-input__menu--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-c-search-input	--pf-c-search-input__menu--Top	calc(100% + 0.25rem)
--pf-c-search-input__menu--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-c-search-input	--pf-c-search-input__menu--ZIndex	200
--pf-c-search-input__menu--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-search-input	--pf-c-search-input--m-top__menu--Top	0
	.pf-c-search-input	--pf-c-search-input--m-top__menu--TranslateY	calc(-100% - 0.25rem)
--pf-c-search-input--m-top__menu--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) calc(-100% - 0.25rem)
	.pf-c-search-input	--pf-c-search-input__menu-list--PaddingTop	0.5rem
--pf-c-search-input__menu-list--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__menu-list--PaddingBottom	0.5rem
--pf-c-search-input__menu-list--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__menu-item--PaddingTop	0.5rem
--pf-c-search-input__menu-item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__menu-item--PaddingRight	1rem
--pf-c-search-input__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu-item--PaddingBottom	0.5rem
--pf-c-search-input__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-search-input	--pf-c-search-input__menu-item--PaddingLeft	1rem
--pf-c-search-input__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-search-input	--pf-c-search-input__menu-item--Color	#151515
--pf-c-search-input__menu-item--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-search-input	--pf-c-search-input__menu-item--BackgroundColor	transparent
	.pf-c-search-input	--pf-c-search-input__menu-item--hover--BackgroundColor	#f0f0f0
--pf-c-search-input__menu-item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-search-input	--pf-c-search-input__menu-item--focus--BackgroundColor	#f0f0f0
--pf-c-search-input__menu-item--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-search-input__bar:hover	--pf-c-search-input__text--after--BorderBottomColor	#06c
--pf-c-search-input__text--after--BorderBottomColor --pf-c-search-input__bar--hover__text--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-search-input__text:hover	--pf-c-search-input__icon--Color	#151515
--pf-c-search-input__icon--Color --pf-c-search-input__text--hover__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-search-input__text:focus-within	--pf-c-search-input__text--after--BorderBottomWidth	2px
--pf-c-search-input__text--after--BorderBottomWidth --pf-c-search-input__text--focus-within--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-search-input__text:focus-within	--pf-c-search-input__text--after--BorderBottomColor	#06c
--pf-c-search-input__text--after--BorderBottomColor --pf-c-search-input__text--focus-within--after--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-search-input__utilities .pf-c-button	--pf-c-button--PaddingRight	0.25rem
--pf-c-button--PaddingRight --pf-c-search-input__utilities--c-button--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input__utilities .pf-c-button	--pf-c-button--PaddingLeft	0.25rem
--pf-c-button--PaddingLeft --pf-c-search-input__utilities--c-button--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-search-input.pf-m-top .pf-c-search-input__menu	--pf-c-search-input__menu--Top	0
--pf-c-search-input__menu--Top --pf-c-search-input--m-top__menu--Top 0
	.pf-c-search-input__menu.pf-m-static	--pf-c-search-input--m-top__menu--TranslateY	0
	.pf-c-search-input__menu-item:hover	--pf-c-search-input__menu-item--BackgroundColor	#f0f0f0
--pf-c-search-input__menu-item--BackgroundColor --pf-c-search-input__menu-item--hover--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-search-input__menu-item:focus	--pf-c-search-input__menu-item--BackgroundColor	#f0f0f0
--pf-c-search-input__menu-item--BackgroundColor --pf-c-search-input__menu-item--focus--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines