Search Input Expand
A search icon opens into a full field while the controls beside it give up the space.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Search Input Expand
*
* A search icon in a toolbar opens into a full field. The field takes the
* width it needs and the controls beside it give way — fading and slidingAbout this pattern
Toolbars run out of room long before the features do, so search hides behind its icon until it is wanted. Clicking the icon widens the shell to a typing field on a short eased curve — width is one of the few properties worth animating outright, and a spring here would let the box overshoot the toolbar edge. The neighbouring buttons clear out faster than the field grows, which is what makes the exchange read as one control taking the room rather than two things fighting over it. The caret follows the opening, Escape closes the field, and focus lands back on the icon it came from.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
A toolbar field that stays an icon until it is needed, then claims the row.
Related patterns
- Inline Edit SwapA value becomes a field where it sits: the surface arrives around the words and the row never changes size.
- Select Dropdown OpenThe list unfolds under the field, options a beat behind the panel, current choice already marked.
- Combobox Filter NarrowTyping fades out the options that no longer match while the survivors slide up.