Skip to content
PatternFly logo

Search input

A search input is a type of input field that can be user to search, find, or filter. See filter guidelines for more information on using search input as a filter.

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.

Demos

Search with autocomplete

This demo handles building the advanced search form using the composable Menu, and the SearchInput's hint prop. It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.

This demo handles building the advanced search form using the composable Menu, as well as wiring up a select using the composable Menu and MenuToggle components. This demo also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.

Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.


View source on GitHub