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