SearchInput

Search box. onChange reports the text; onSearch fires on Enter or the search button. enterButton adds the button: true for an icon, a string for a labelled button, or any node. redirectTo navigates on search with the query appended (?q=… by default).


import { SearchInput } from '@gg-software/ui';
 
<SearchInput placeholder="Search…" onSearch={(q) => runSearch(q)} />
<SearchInput placeholder="Search products" enterButton="Search" />
 
// navigate to /search?q=<query> on submit
<SearchInput redirectTo="/search" queryParam="q" />

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	content rendered inside the component
`status`	`"warning" \| "error"`	—	validation state styling
`step`	`string \| number`	`1`	amount added/removed per step or arrow key (default 1)
`size`	`"sm" \| "md" \| "lg"`	`md`
`max`	`string \| number`	—
`min`	`string \| number`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onChange`	`((value: string) => void)`	—	text change
`onSearch`	`((value: string) => void)`	—	fired on Enter or when the search action is triggered
`enterButton`	`ReactNode`	—	`true` = icon button, string = labelled button, node = custom button content
`loading`	`boolean`	`false`
`clearable`	`boolean`	`true`
`redirectTo`	`string`	—	navigate here on search, appending the query as `?<queryParam>=<value>`
`queryParam`	`string`	`q`

* required · generated from packages/ui/src/input/SearchInput/SearchInput.tsx