Tag Input Add
Committed text lands as a chip and the caret slides along to the space it took.
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 { useId, useRef, useState, type KeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tag Input Add
*
* Committed text leaves the caret and lands as a chip, and the caret
* slides along to the space the chip just took. Backspace on an emptyAbout this pattern
The commit is the moment worth animating: text that was in the caret a frame ago is now an object with edges, and the field it was typed into moves over to make room. Chips and caret share one critically damped reflow spring, so the row resettles as a single body — and both move with position-only layout, because a chip is a box full of text and interpolating its box would smear the glyphs inside it. Removal is faster than addition, out-of-flow immediately, so the gap closes while the chip is still fading. Backspace on an empty field puts the last chip back in the caret rather than deleting it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
Text committing into an object the caret then moves past.
Related patterns
- File Drop Zone ActiveThe dashed outline energizes and the target lifts off the page while a file is held over it.
- OTP Paste FillA pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.
- Quantity AdjustThe count rolls in the direction it moved and the order total takes a brief tint.