Skip to Content
Patternfly Logo

Search input

ExamplesPropsCSS Variables

Examples

Basic

Match with result count

Match with navigable options

Props

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

CSS Variables

.pf-c-search-input--pf-c-search-input__text--before--BorderWidthc_search_input__text_before_BorderWidth
1px
.pf-c-search-input--pf-c-search-input__text--before--BorderColorc_search_input__text_before_BorderColor
#f0f0f0
.pf-c-search-input--pf-c-search-input__text--after--BorderBottomWidthc_search_input__text_after_BorderBottomWidth
1px
.pf-c-search-input--pf-c-search-input__text--after--BorderBottomColorc_search_input__text_after_BorderBottomColor
#8a8d90
.pf-c-search-input--pf-c-search-input--hover__text--after--BorderBottomColorc_search_input_hover__text_after_BorderBottomColor
#06c
.pf-c-search-input--pf-c-search-input__text--focus-within--after--BorderBottomWidthc_search_input__text_focus_within_after_BorderBottomWidth
2px
.pf-c-search-input--pf-c-search-input__text--focus-within--after--BorderBottomColorc_search_input__text_focus_within_after_BorderBottomColor
#06c
.pf-c-search-input--pf-c-search-input__text-input--PaddingTopc_search_input__text_input_PaddingTop
0.375rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingRightc_search_input__text_input_PaddingRight
0.5rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingBottomc_search_input__text_input_PaddingBottom
0.375rem
.pf-c-search-input--pf-c-search-input__text-input--PaddingLeftc_search_input__text_input_PaddingLeft
2rem
.pf-c-search-input--pf-c-search-input__text-input--MinWidthc_search_input__text_input_MinWidth
6ch
.pf-c-search-input--pf-c-search-input__icon--Leftc_search_input__icon_Left
0.5rem
.pf-c-search-input--pf-c-search-input__icon--Colorc_search_input__icon_Color
#6a6e73
.pf-c-search-input--pf-c-search-input__text--hover__icon--Colorc_search_input__text_hover__icon_Color
#151515
.pf-c-search-input--pf-c-search-input__icon--TranslateYc_search_input__icon_TranslateY
-50%
.pf-c-search-input--pf-c-search-input__utilities--MarginRightc_search_input__utilities_MarginRight
0.5rem
.pf-c-search-input--pf-c-search-input__utilities--MarginLeftc_search_input__utilities_MarginLeft
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--child--MarginLeftc_search_input__utilities_child_MarginLeft
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--c-button--PaddingRightc_search_input__utilities_c_button_PaddingRight
0.25rem
.pf-c-search-input--pf-c-search-input__utilities--c-button--PaddingLeftc_search_input__utilities_c_button_PaddingLeft
0.25rem
.pf-c-search-input:hover--pf-c-search-input__text--after--BorderBottomColorc_search_input__text_after_BorderBottomColor
#06c
.pf-c-search-input__text:hover--pf-c-search-input__icon--Colorc_search_input__icon_Color
#151515
.pf-c-search-input__text:focus-within--pf-c-search-input__text--after--BorderBottomWidthc_search_input__text_after_BorderBottomWidth
2px
.pf-c-search-input__text:focus-within--pf-c-search-input__text--after--BorderBottomColorc_search_input__text_after_BorderBottomColor
#06c
.pf-c-search-input__utilities .pf-c-button--pf-c-button--PaddingRightc_button_PaddingRight
0.25rem
.pf-c-search-input__utilities .pf-c-button--pf-c-button--PaddingLeftc_button_PaddingLeft
0.25rem