Search Input

Forms

An input with a leading search icon and a one-click clear button.

Search inputs combine an icon, a text field, and a clear affordance. The clear button only appears once there is a value, so users can reset their query in a single click.

npx shadcn@latest add search-input

Basic usage

The magnifying glass sits on the left; clear appears as soon as you type.

Preview

Live

Query: none

tsx

1const [value, setValue] = useState("")
2
3<SearchInput
4  value={value}
5  onChange={(event) => setValue(event.target.value)}
6  placeholder="Search components…"
7/>

With a label

Use alongside Label for accessible, labeled search fields.

Preview

Live

tsx

1<Label htmlFor="search">Search</Label>
2<SearchInput id="search" placeholder="Find anything…" />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	string	The controlled search value.
onChange	ChangeEventHandler<HTMLInputElement>	Called when the value changes, including when cleared.
placeholder	string	Placeholder shown while the field is empty.
disabled	boolean= false	Disables the input and clear button.
className	string	Additional classes merged into the input.