- Docs
- components
- SearchField
SearchField
A search field allows a user to enter and clear a search query.
Search fields can be built with <input type="search">, but these can be hard to style consistently cross browser. SearchField helps achieve accessible search fields that can be styled as needed.
Installation
This components uses the following components, which you also need to install:
Copy and paste the following code into your project: searchfield.tsx
Loading...Update the import paths to match your project setup.
Composed Components
A SearchField uses the following components, which may also be used standalone or reused in other components.
Label
A label provides context for an element.
Input
An input allows a user to enter a plain text value with a keyboard.
Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Reusable Wrapper - Example
If you will use a SearchField in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper ProtoSearchField. This wrapper serves as an excellent starting point for use throughout your codebase.
The ProtoSearchField component extends the props of React Aria SearchField and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the search field |
description | string | undefined | undefined | Description text for the search field |
errorMessage | string | ((validation: AriaValidationResult) => string) | undefined | undefined | Error message to display or function to generate it |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.