Textarea Autogrow
The field takes one line-height more as the text wraps, easing into it rather than snapping.
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,
useId,
useLayoutEffect,
useRef,
useState,
} from "react";
import { motion, useReducedMotion } from "motion/react";About this pattern
The height is read from a hidden mirror holding the same text in the same font at the same width, which is why the growth is correct on the frame the wrap happens rather than one frame late. Height is one of the few properties worth animating outright, since the motion genuinely is a size change — but it runs as a short eased tween and never a spring: a field that springs past its own height flashes a clipped line of the user's own writing. Past the row cap it stops growing and scrolls, and the hint says so.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A field that grows to a cap and then scrolls, without the caret jumping.
Related patterns
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.
- Character Count LimitA small ring closes as the field fills, shows what is left once the cap is in sight, and tints once when the text runs past it.
- Form Reset ClearA wash crosses each row in turn and the value is dropped while the row is covered.