Build · New

Search Field

A search field with the magnifier, a clear button once there is text and a loading spinner, with optional suggestions as you type. Boxed in pages and forms, underlined in toolbars and lists.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/search-field

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { SearchField } from "@/components/ui/search-field";

<SearchField label="Search transactions" suggestions={merchants} onValueChange={setQuery} />

Examples

Styles and states

variant: outline (boxed) or minimal (underlined; not inside forms). loading shows the spinner and keeps the query.

Inline completion

inlineComplete shows the rest of the first matching suggestion faintly after the text: press Tab (or the forward arrow) to take it, or keep typing.

API reference

SearchField

Also takes <input> props.

Prop	Type	Default	Description
`label`	`ReactNode`		Figma's Label.
`variant`	`"outline" \| "minimal"`	`"outline"`	Figma's Style.
`value / defaultValue`	`string`		The query.
`onValueChange`	`(value: string) => void`		On every change, including picking a suggestion and clearing.
`onClear`	`() => void`		After the clear button empties the field.
`loading`	`boolean`	`false`	State = Loading.
`suggestions`	`string[]`		Suggestions shown as people type.
`inlineComplete`	`boolean`	`false`	State = Auto complete.
`status`	`string`		The result count or state, announced politely.
`clearLabel`	`string`		The clear button's name. Default: “Clear search” in the page language.
`helperText / error / disabled`	`…`		As on Input Field.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowDownArrowUp`	Between suggestions.
`Enter`	Picks the highlighted suggestion.
`Escape`	Closes the suggestions, then clears the query (the clear button is for pointer and touch).
`TabArrowRight`	With `inlineComplete`, at the end of the text: takes the faint completion.

ARIA

The region is role="search" and the input type="search" with a visible label; suggestions are a listbox tied to the input (Base UI).
The clear button is named “Clear search” in the page language and returns focus to the field.
Pass the result count as status to have it announced politely: while suggestions are open, Base UI hides the rest of the page from screen readers, so a live region outside the field would go unheard.

Arabic and RTL notes

Mirrors

The magnifier sits at the start (the right), the clear button and spinner at the end (the left).

Does not mirror

The magnifier, clear and spinner icons don't mirror.

Numerals: What people type stays as typed; show the result count in the page numerals (formatNumber).
Arabic typography: label-16 like every field; suggestions in label-14.
Mixed-direction text: The query and suggestions take dir="auto": an English merchant name in an Arabic UI runs left to right.

All components ›