Input Focus Underline
The label lifts out of the field and an underline grows outward from the center on focus.
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, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Input Focus Underline
*
* The label lifts out of the field and an underline draws outward from
* the center the moment the input takes focus.About this pattern
Focus feedback for text fields, sized for forms where a dozen of these fire while the user tabs through. The label travels up out of the input at a constant font size — a floating label that shrinks its glyphs is the cheapest tell in form design — and the accent line grows from the middle to both ends at once, which reads as the field opening rather than as a wipe the eye has to follow. A field that already holds a value keeps its label lifted after blur, so the state is never ambiguous.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
The floating-label idea, kept here without the glyph scaling.
Related patterns
- Search Input ExpandA search icon opens into a full field while the controls beside it give up the space.
- Date Picker OpenThe calendar unfolds from the field and the days arrive in a wave, today already marked.
- Inline Edit SwapA value becomes a field where it sits: the surface arrives around the words and the row never changes size.