Skip to content
PatternFly logo

Search input

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

No match

Match with result count

3

Match with navigable options

1 / 3

With submit button

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-top
.pf-c-search-input__menu
Modifies the menu to display above the toggle.
.pf-m-static
.pf-c-search-input__menu
Modifies the menu to be statically positioned to support custom positioning.
.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.pf-m-static--pf-c-search-input--m-top__menu--TranslateY
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