Forms

Search field

The header search: one ink underline, no box, the placeholder in Garamond and the glyph at the end.

components/coach/search-field.tsx

Examples

Default

Wider, with a hint

components/coach/search-field.tsx

import { SearchField } from "@/components/coach/search-field";

<SearchField name="q" />

Prop	Type	Default	Description
placeholder	string	"Search"	Set in Garamond, in ink, as the live site does.
className	string	—	Merged last, so it can override layout. Keep brand styling in the component.
...props	Omit<InputHTMLAttributes, 'type'>	—	name, value, onChange. The type is always search.