ExpandSearch

A search button that widens into a field.

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/expand-search.json

React
import ExpandSearch from "@/components/fx/expand-search"

<ExpandSearch label="Search docs" onSearch={search} />

A role="search" form; the toggle reports aria-expanded and controls the field.
Focus moves into the field when it opens; Escape closes it and returns focus to the button.
The field is out of the Tab order while closed.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) opens instantly.

Prop	Type	Default	Description
onSearch	(query: string) => void	—	Called on submit.
placeholder	string	'Search…'	Field placeholder.
label	string	'Search'	Accessible name.