SearchInput

A search field above a list — the first element of the filter bar. It filters, it does not search: it narrows the list on every keystroke, no Search button.

When to use it

The first element of IngotToolbar above a list where records are found by name, code or slug.
Lists with more records than fit the screen — searching beats paging through them.

When not to use it

Product-wide search from the top bar. The product has none — and if one appears, it is its own primitive with results, not a field above a single list.
A form field that stores a value. This field saves nothing — it only narrows what is visible.

Properties

value: string — The current query. Controlled from outside.
onChange: (next: string) => void — The new query on every keystroke. Debouncing belongs to the caller, next to the data — the field cannot know whether a network request rides on it.
label: string — A translated aria-label. A placeholder is no substitute for a name — it disappears once filled.
placeholder: string — A translated format hint (“Search by name or code…”).
disabled: boolean — A disabled field. Defaults to false.
ref: React.Ref<HTMLInputElement> — A ref to the field itself — for the keyboard shortcut that jumps into search. Not for focus on mount; that is what autoFocus is for.
combobox: { controls: string; expanded: boolean; activeOption?: string | null } — A field that drives its own result list: `controls` is the id of the element with `role="listbox"`, `expanded` says whether it is showing, and `activeOption` is the id of the highlighted item. Without it a screen reader knows nothing about the results — the arrows move a highlight, not the focus. Not for a filter above a list.
className: string — A pass-through class on the wrapper — the screen sets the width.
testId: string — An anchor for tests — on the input.