Expanding Search
betaA search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add expanding-searchnpm packages installed: class-variance-authority.
import { ExpandingSearch } from "@/components/ui/expanding-search";Default
Gallery
<ExpandingSearch>
| Prop | Type | Default |
|---|---|---|
clearLabel | string | "Clear search" |
defaultOpen | boolean | false |
defaultValue | string | "" |
disabled | boolean | false |
expandedWidthThe open field's inline size, any CSS length. | string | "14rem" |
inputPropsSpread onto the <input> — for combobox wiring. | Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue"> | {} |
labelNames the trigger and the field. | string | "Search" |
onOpenChange | (open: boolean) => void | — |
onSearchCalled with the text on Enter. | (value: string) => void | — |
onValueChange | (value: string) => void | — |
open | boolean | — |
placeholder | string | "Search…" |
stroke | boolean | — |
value | string | — |
Plus every attribute of <form> except onSubmit, defaultValue, onChange.
A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can preventDefault to keep Escape for its own listbox.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes