Search Input Component

Design search inputs with icons, suggestions, keyboard support, and ac

Search icon on the left, a full-width text input, and an optional clear button on the right. Padding is 12–14px vertically and 14–16px horizontally; the border is 1px neutral with a radius of 8px, and it has a shadow-1 effect.

The default, hover, and focus states include a focus ring to indicate active elements.

Disabled: muted text and icon; no shadow.

This error state appears when validation is required, such as a minimum length constraint. It clearly communicates the issue to the user.

Suggestions & Results are displayed alongside this error state.

Dropdown below input with max-height scroll, keyboard navigation, high

The magnifying glass icon uses the primary color scheme; a clear (×) appears when text is entered. Both elements must be keyboard-focusable, and clicking ‘clear’ resets the field and suggestions.

A visible label or aria-label provides context, and the suggestions list is associated via aria-controls / aria-expanded. Announce results counts and ensure 44px targets; provide an escape key to close the list.

Frequently asked questions