Search input

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 go to our Beta components page on GitHub.

Examples

Basic

Match with result count

Match with navigable options

With submit button

Focus search input using ref

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.

Use equal sign as search attribute delimiter

Add custom footer element after the attributes in the menu

Props

SearchInput

*required
Name	Type	Description
advancedSearchDelimiter	string	Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props
aria-label	string	An accessible label for the search input
attributes	string[] \| SearchAttribute[]	Array of attribute values used for dynamically generated advanced search
className	string	Additional classes added to the banner
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
nextNavigationButtonAriaLabel	string	Label for the button to navigate to next result
onChange	(value: string, event: React.FormEvent<HTMLInputElement>) => 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	Function called when user clicks to navigate to next result
onPreviousClick	(event: React.SyntheticEvent<HTMLButtonElement>) => void	Function called when user clicks to navigate to previous result
onSearch	( value: string, event: React.SyntheticEvent<HTMLButtonElement>, attrValueMap: { [key: string]: string } ) => void	A callback for when the search button clicked changes
onToggleAdvancedSearch	(event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void	A callback for when the open advanced search button is clicked
openMenuButtonAriaLabel	string	Label for the button which opens the advanced search form menu
placeholder	string	placeholder text of the search input
previousNavigationButtonAriaLabel	string	Label for the button to navigate to previous result
resetButtonLabel	string	Label for the buttons which reset the advanced search form and clear 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 buttons which called the onSearch event handler
value	string	Value of the search input

SearchAttribute

*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

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-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