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

No match

Match with result count

3

Match with navigable options

1 / 3

Accessibility

AttributesApplied toOutcome
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-buttonProvides an accessible label for the previous nav button. Required
aria-label="Next".pf-c-search-input__nav > .pf-c-buttonProvides an accessible label for the next nav button. Required
aria-label="[descriptive text]".pf-c-search-input__text-inputProvides an accessible label for the search input. Required
aria-label="Clear".pf-c-search-input__clear > .pf-c-buttonProvides an accessible label for the clear button. Required

Usage

ClassApplied toOutcome
.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