Avala Design
← Components/primitives

Search

Specialized text input with magnifying glass icon and clear button. Carbon-spec.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Search } from "@avala/design";

<Search>Search</Search>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-search--defaultOpen in Storybook →

When to use

  • Any input that filters / queries a list — top-of-list search bars, command palettes, autocomplete entry points.
  • The clear button auto-shows when there's a value; pair with onClear to reset state.

When not to use

  • Plain single-line text → use `TextInput`.
  • Searchable + selectable list of options → use the ComboBox pattern.
  • Spotlight-style global command surface → use the CommandPalette pattern.