Skip to content
Components

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 "@instruments/materia-ui/components/search-input".

⌘K

Usage

import { SearchInput, SearchInputProps } from "@instruments/materia-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 - so leave both defaults alone in standard search/filter placements; pass size explicitly for compact embedded contexts (popovers, table headers).

Props

PropTypeDefaultDescription
sizeResponsiveSize"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.

hasErrorboolean

Show error styling.

valuestring

Controlled value. Omit to let SearchInput manage its own state.

defaultValuestring

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.

shortcutHintstring

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.

suggestionsreadonly 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.

suggestionPrefixstring"Try:"

Static prefix shown before each cycling suggestion.

suggestionIntervalMsnumber5000

Rotation interval for the suggestions in ms.

testIdstring

Test ID for testing.

Also exports

  • typeSearchInputProps

Composition

Builds on

Flex, Grid, InputGroup, Kbd