SearchInput

Search input over InputGroup: a search icon, a built-in clear button that appears once the field has a value, and an optional keyboard-shortcut hint shown while it's empty. Pass suggestions for an animated "Try: …" placeholder that cycles while the field is empty. Import from "@desk/ui/components/search-input".

⌘K

Usage

import { SearchInput, SearchInputProps } from "@desk/ui/components/search-input";

Best practices

Use SearchInput for search/filter fields — it supplies the search icon, a clear button, and (via shortcutHint) a Kbd hint; don't rebuild these on a plain Input.
onChange receives the next string on every keystroke and on clear (not a DOM event) — pass value for controlled use or defaultValue for uncontrolled.
Pass cycling placeholder ideas via suggestions (which suppresses the static placeholder); shortcutHint shows only while empty and is swapped for the clear button once the field has a value.
Pill (radius="full") at the 48px xl default is the search signature — mirrors mb3's SearchInputField, which is pill at every size — so leave both defaults alone in standard search/filter placements; pass size explicitly for compact embedded contexts (popovers, table headers).

Props

Prop	Type	Default	Description
size	`ResponsiveSize`	`"xl"`	Size of the search input, its icon, and its clear button — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.
radius	`"rounded" \| "square" \| "full"`		Border radius style.
hasError	`boolean`		Show error styling.
value	`string`		Controlled value. Omit to let SearchInput manage its own state.
defaultValue	`string`		Initial value when uncontrolled.
onChange	`(value: string) => void`		Called with the next value on every keystroke and on clear.
onClear	`() => void`		Called when the built-in clear button is pressed.
shortcutHint	`string`		Keyboard shortcut hint (e.g. "⌘K") rendered as a `Kbd` while the field is empty. Replaced by the clear button once the field has a value.
suggestions	`readonly string[]`		Cycling placeholder suggestions, animated over the field while it is empty (e.g. `["white dove", "alabaster", …]`). SearchInput owns the overlay, alignment, and native-placeholder blanking — just pass the strings. When set, the static `placeholder` is suppressed.
suggestionPrefix	`string`	`"Try:"`	Static prefix shown before each cycling suggestion.
suggestionIntervalMs	`number`	`5000`	Rotation interval for the suggestions in ms.
testId	`string`		Test ID for testing.

Also exports

typeSearchInputProps

Composition

Builds on

InputGroup, Kbd