Add a SearchInput
Use SearchInput
when you want a simple, single-field search anywhere on a page.
When a user submits a term, they are redirected to the search page with the query applied.
Behavior
Section titled “Behavior”- Submitting a term navigates to the search page with that term applied.
- Honors the current locale so results open at the localized search route.
- Can be placed anywhere in a page layout (e.g., hero, or within a section).
Reference
Section titled “Reference”The SearchInput
component focuses on behavior rather than configuration and works without props.
These optional props cover common needs:
className
Section titled “className”type: string
example: "mt-4"
required: false
Additional css classes, separated by spaces, to style the input For example set this to "max-w-md"
if you want to
constraint the maximum width.