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

No match

Match with result count

3

Match with navigable options

1 / 3

Advanced search expanded

Autocomplete

Autocomplete last option hint

Advanced search expanded with autocomplete

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
aria-label="Search"
.pf-c-button
Provides an accessible label for the search button. Required
aria-label="Advanced search"
.pf-c-button
Provides an accessible label for the advanced search toggle. Required
aria-expanded="[true/false]"
.pf-c-button
Indicates whether the advanced search menu is expanded or collapsed. Required
id
.pf-c-search-input__text-input
Assigns an ID that is used with aria-labelledby on .pf-c-search-input__menu-list. Required when using autocomplete
aria-labelledby="[id of text input]"
.pf-c-search-input__menu-list
Gives the menu list an accessible label. Required when using autocomplete
disabled
.pf-c-search-input__text-input.pf-m-hint
Disables the hint text input from being submitted with the search input. Required when using hint text
aria-hidden="true"
.pf-c-search-input__text-input.pf-m-hint
Hides the hint text input from assistive technology. Required when using hint text

Usage

Class
Applied to
Outcome
.pf-c-search-input
<div>
Initiates the custom search input component. Required
.pf-c-search-input__bar
<div>
Initiates the custom search input bar. 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
.pf-c-search-input__menu
<div>
Initiates the search input dropdown menu.
.pf-c-search-input__menu-body
<div>
Initiates the search input dropdown menu body element.
.pf-c-search-input__menu-list
<div>
Initiates the search input dropdown menu list.
.pf-c-search-input__menu-list-item
<div>
Initiates the search input dropdown menu list item.
.pf-c-search-input__menu-item
<div>
Initiates the search input dropdown menu item.
.pf-c-search-input__menu-item-text
<span>
Initiates the search input dropdown menu item text.
.pf-m-hint
.pf-c-search-input__text-input
Modifies the text input for hint text styles.

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