Skip to content

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.

  • 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).

The SearchInput component focuses on behavior rather than configuration and works without props. These optional props cover common needs:

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.