Skip to content
Patternfly Logo

Search input

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

Match with result count

Match with navigable options

Focus search input using ref

Advanced


Props

SearchInput

NameTypeRequiredDefaultDescription
advancedSearchDelimiterstringNoDelimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props
aria-labelstringNoAn accessible label for the search input
attributesstring[] | SearchAttribute[]NoArray of attribute values
classNamestringNoAdditional classes added to the banner
hasWordsAttrLabelstringNoAttribute label for strings unassociated with one of the provided listed attributes
innerRefReact.RefObject<any>NoA reference object to attach to the input box
isDisabledbooleanNoFlag indicating if search input is disabled
onChange(value: string, event: React.FormEvent<HTMLInputElement>) => voidNoA callback for when the input value changes
onClear(event: React.SyntheticEvent<HTMLButtonElement>) => voidNoA callback for when the user clicks the clear button
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidNoFunction called when user clicks to navigate to next result
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidNoFunction called when user clicks to navigate to previous result
onSearch( value: string, event: React.SyntheticEvent<HTMLButtonElement>, attrValueMap: { [key: string]: string } ) => voidNoA callback for when the search button clicked changes
openMenuButtonAriaLabelstringNoLabel for the button which opens the advanced search form menu
placeholderstringNoplaceholder text of the search input
resetButtonLabelstringNoLabel for the buttons which reset the advanced search form and clear the search input
resultsCountnumber | stringNoThe 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"
submitSearchButtonLabelstringNoLabel for the buttons which called the onSearch event handler
valuestringNoValue of the search input

SearchAttribute

NameTypeRequiredDefaultDescription
attrNo type infoYesThe 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
displayNo type infoYesThe 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--pf-c-search-input__text--before--BorderColor
#f0f0f0
.pf-c-search-input--pf-c-search-input__text--after--BorderBottomWidth
1px
.pf-c-search-input--pf-c-search-input__text--after--BorderBottomColor
#8a8d90
.pf-c-search-input--pf-c-search-input__bar--hover__text--after--BorderBottomColor
#06c
.pf-c-search-input--pf-c-search-input__text--focus-within--after--BorderBottomWidth
2px
.pf-c-search-input--pf-c-search-input__text--focus-within--after--BorderBottomColor
#06c
.pf-c-search-input--pf-c-search-input__text-input--PaddingTop
0.375rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingRight
0.5rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingBottom
0.375rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingLeft
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--pf-c-search-input__icon--Left
0.5rem
.pf-c-search-input--pf-c-search-input__icon--Color
#6a6e73
.pf-c-search-input--pf-c-search-input__text--hover__icon--Color
#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--pf-c-search-input__utilities--MarginLeft
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--child--MarginLeft
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--c-button--PaddingRight
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--c-button--PaddingLeft
0.25rem
.pf-c-search-input--pf-c-search-input__menu-body--PaddingTop
1rem
.pf-c-search-input--pf-c-search-input__menu-body--PaddingRight
1rem
.pf-c-search-input--pf-c-search-input__menu-body--PaddingBottom
1rem
.pf-c-search-input--pf-c-search-input__menu-body--PaddingLeft
1rem
.pf-c-search-input--pf-c-search-input__menu--BackgroundColor
#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--pf-c-search-input__menu--Top
calc(100% + 0.25rem)
.pf-c-search-input--pf-c-search-input__menu--ZIndex
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--pf-c-search-input__menu-list--PaddingTop
0.5rem
.pf-c-search-input--pf-c-search-input__menu-list--PaddingBottom
0.5rem
.pf-c-search-input--pf-c-search-input__menu-item--PaddingTop
0.5rem
.pf-c-search-input--pf-c-search-input__menu-item--PaddingRight
1rem
.pf-c-search-input--pf-c-search-input__menu-item--PaddingBottom
0.5rem
.pf-c-search-input--pf-c-search-input__menu-item--PaddingLeft
1rem
.pf-c-search-input--pf-c-search-input__menu-item--Color
#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--pf-c-search-input__menu-item--focus--BackgroundColor
#f0f0f0
.pf-c-search-input__bar:hover--pf-c-search-input__text--after--BorderBottomColor
#06c
.pf-c-search-input__text:hover--pf-c-search-input__icon--Color
#151515
.pf-c-search-input__text:focus-within--pf-c-search-input__text--after--BorderBottomWidth
2px
.pf-c-search-input__text:focus-within--pf-c-search-input__text--after--BorderBottomColor
#06c
.pf-c-search-input__utilities .pf-c-button--pf-c-button--PaddingRight
0.25rem
.pf-c-search-input__utilities .pf-c-button--pf-c-button--PaddingLeft
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-item:hover--pf-c-search-input__menu-item--BackgroundColor
#f0f0f0
.pf-c-search-input__menu-item:focus--pf-c-search-input__menu-item--BackgroundColor
#f0f0f0

View source on GitHub