Search input

SearchInput is TextInput forced to type="search" with a built-in magnifying-glass affordance and a clear button that appears once the field holds a value. It inherits every TextInput prop and adds a controlled onClear hook. Reach for it whenever a text control filters or queries a set — a product search, a table filter, a directory lookup.

Use it for

• Product / catalog search fields
• Table, list, or directory filter inputs
• Any query field that benefits from a one-click clear
• Search surfaces that should read as search, not plain text

Import

import { SearchInput } from '@brikdesigns/bds';

Variants

Default

Uncontrolled, the field tracks its own value to toggle the clear button and resets itself when cleared. Controlled, wire value + onChange + onClear together and reset value to '' in your onClear handler.

// Uncontrolled
<SearchInput label="Search" placeholder="Search products..." />

// Controlled
<SearchInput
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onClear={() => setQuery('')}
  placeholder="Search products..."
/>

Sizes

sm (32px), md (40px, default), lg (48px) — inherited from TextInput.

<SearchInput size="sm" placeholder="Compact" />
<SearchInput size="md" placeholder="Default" />
<SearchInput size="lg" placeholder="Prominent" />

Error and helper text

Inherited from TextInput. error triggers aria-invalid and replaces helperText.

<SearchInput placeholder="Search" helperText="Searches names and tags" />

When not to use

• Don't pair it with a submit button and call it a filter bar. A composed search-plus-filters region is FilterBar.
• Don't rebuild the clear affordance. The ✕ button is owned by the component; don't add a second one.

Accessibility

• Renders a native <input type="search">, so assistive tech announces it as a search field.
• The clear button is a keyboard-reachable <button type="button"> (tabIndex={0}) with aria-label "Clear search"; the magnifying glass is decorative.
• Pass a label (or an aria-label via passthrough props) so the field has an accessible name.
• type, iconBefore, and iconAfter are reserved by SearchInput and cannot be overridden.

API

Inherits all TextInput props except type (forced to "search"), iconBefore (reserved for the magnifying glass), and iconAfter (reserved for the clear button) — including label, size, error, helperText, fullWidth, and disabled.

Related

• TextInput — the base field SearchInput wraps
• FilterBar — composed search-and-filters region
• MultiSelect — for picking from a searchable set rather than free-text query
• Storybook playground