SearchInput

Stripe SearchField

A list's search: a compact boxed field (not the underlined form field) that lines up with the filter buttons beside it, optionally offering known values as suggestions while accepting anything typed. 16px text on phones so iOS doesn't zoom.

pnpm add @zikzuk/ui

import { SearchInput } from "@zikzuk/ui";

Searching a list

Andheri
Bandra
Colaba
Dadar
Thane

When to use

The filter row of a list page; keep its value in the URL.

Props

Prop	Type	Description
value / onChange	string / (value) => void	Controlled.
placeholder	string	Also its label unless label is given.
label	string	Accessible name.
suggestions	string[]	Known values offered while typing.
autoFocus	boolean	Focus on mount.
className	string	Extra classes on the outer element.