Currency Input Format
Separators fade in where they belong as the amount groups itself, and the caret holds its place.
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, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Currency Input Format
*
* An amount field that groups itself as it is typed. Each separator
* fades in where it belongs as the figure regroups around it, and theAbout this pattern
An amount field that groups itself without ever losing the typist. Each separator fades in where it belongs as the figure regroups around it, and the caret is put back before paint — counted in typed characters rather than in string positions, which is the only measure that survives a separator appearing to its left. The row is anchored at its right-hand end and its cells are keyed by slot rather than by glyph, so no figure is ever mid-flight under a caret the browser has already moved. Nothing scales and nothing bounces, and the field stays a real input holding the real value.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
Transfer amounts group live while the field stays editable mid-number.
Related patterns
- Range Double HandleTwo handles bound a range and the fill between them tracks both, one-to-one under the pointer and settling on a spring from the keyboard.
- Search Input ExpandA search icon opens into a full field while the controls beside it give up the space.
- Checkbox Check DrawThe box fills from its center and the tick strokes itself in over the fill.