Forms

Search Field

Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.

State × Size — 12 variants

betaReact AvailableFigma AvailableDocs Partial

React last updated: 2026-07-13
Documentation last updated: 2026-06-01
Accessibility target: WCAG 2.2 AA (target)
Version: 0.2.0-beta

Known open questions

No autocomplete, suggestions, or result popover in this phase.
Escape clears the field when a value is present and showClear is enabled.

Live preview

Search Field is the canonical search-specific single-line field with a leading icon and optional clear action.

Default

Search components

Sizes

Small / Medium / Large

Small search

Medium search

Large search

States

Without clear / Disabled

Filter (no clear)

Disabled search

Purpose

A text input specialized for search — always includes a leading search icon and an optional clear button once text is entered.

Anatomy

SearchField = FormField + search input + MagnifyingGlass icon + optional clear button.

Variants and states

default · error · disabled

When to use

Any search/filter input, whether inline in a toolbar or as a page-level search bar.

When not to use

General free-text entry unrelated to searching/filtering — use Text Input.

Accessibility

The clear button needs an aria-label of "Clear search" or equivalent, since it's icon-only.

Keyboard behavior

Native search input behavior. Escape clears when enabled. Clear button is a separate focusable control.

Common mistakes

Leaving the clear button visible when the field is empty.

Properties

State × Size as variants. Value (text). Show clear icon (boolean).

Search Field vs Text Input with a leading icon

Search Field is the documented Figma component for search/filter use cases. It adds search semantics, the approved icon, and optional clear behavior without duplicating TextInput implementation.

Tokens used

component/radius/controlsemantic/border/defaultsemantic/icon/muted

Component API

Prop	Type	Default	Description
label	string	—	Visible field label via FormField.
showClear	boolean	true	Shows clear button when value is non-empty.
onValueChange	(value: string) => void	—	Controlled value change callback.
error	string	—	Validation message rendered through FormField.

React example

Copy React example

import { SearchField } from "@/components/ui/SearchField";

export function Example() {
  return (
    <SearchField
      label="Search components"
      placeholder="Search the design system…"
      defaultValue=""
    />
  );
}