- 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
npx shadcn@latest add https://backchanel.com/default/searchfieldComposed 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 JollySearchField. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollySearchField 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.