Skip to content
Patternfly Logo

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

Props

SearchInput

NameTypeRequiredDefaultDescription
aria-labelstringNo'Search input'An accessible label for the search input
classNamestringNoAdditional classes added to the banner
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
placeholderstringNoplaceholder text of 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"
valuestringNo''Value of the search input

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

View source on GitHub