Search input

component

The search/filter query input shell — a leading magnifier, a clear button, and a `suggestions` dropdown slot revealed on focus.

Install

npx shadcn@latest add @engram/search-input

Registry item: /r/search-input.json — the machine-readable definition agents install from.

Example

Props

Prop	Type	Default	Description
`value`*	`string`	`—`	Current query text (controlled).
`onValueChange`	`(value: string) => void`	`—`	Fired on every keystroke with the new text.
`onClear`	`() => void`	`—`	Fired when the clear (×) button is pressed; falls back to onValueChange("").
`suggestions`	`ReactNode`	`—`	Suggestion/autocomplete content shown in a dropdown while focused. Engram renders the input shell and the panel; the consumer owns the query grammar and what goes in here.
`className`	`string`	`—`	—

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.