Skip to Content

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
ExamplesCSS Variables

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