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

No match

Match with result count

3

Match with navigable options

1 / 3

Accessibility

Attributes
Applied to
Outcome
aria-hidden="true"
.pf-c-search-input__icon > *
Hides the search icon from assistive technologies. Required
aria-label="Previous"
.pf-c-search-input__nav > .pf-c-button
Provides an accessible label for the previous nav button. Required
aria-label="Next"
.pf-c-search-input__nav > .pf-c-button
Provides an accessible label for the next nav button. Required
aria-label="[descriptive text]"
.pf-c-search-input__text-input
Provides an accessible label for the search input. Required
aria-label="Clear"
.pf-c-search-input__clear > .pf-c-button
Provides an accessible label for the clear button. Required

Usage

Class
Applied to
Outcome
.pf-c-search-input
<div>
Initiates the custom search input component. Required
.pf-c-search-input__text
<span>
Initiates the text area. Required
.pf-c-search-input__text-input
<input>
Initiates the search input. Required
.pf-c-search-input__icon
<span>
Initiates the search icon container. Required
.pf-c-search-input__utilities
<span>
Initiates the utilities area beside the search input.
.pf-c-search-input__count
<span>
Initiates the item count container.
.pf-c-search-input__nav
<span>
Initiates the navigable buttons container.
.pf-c-search-input__clear
<span>
Initiates the clear button container. Required when there is text in 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