Form motion patterns
Inputs, toggles, pickers and validation. Small motions that confirm the control heard you.
React + Motion · new patterns added daily
Character Count Limit
ReactA 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.
Checkbox Check Draw
ReactThe box fills from its center and the tick strokes itself in over the fill.
Color Picker Swatch
ReactA ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.
Combobox Filter Narrow
ReactTyping fades out the options that no longer match while the survivors slide up.
Currency Input Format
ReactSeparators fade in where they belong as the amount groups itself, and the caret holds its place.
Date Picker Open
ReactThe calendar unfolds from the field and the days arrive in a wave, today already marked.
Field Reorder Drag
ReactA row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.
File Drop Zone Active
ReactThe dashed outline energizes and the target lifts off the page while a file is held over it.
Form Autosave Indicator
ReactA field that kept itself pulses its border once and writes the time underneath.
Form Reset Clear
ReactA wash crosses each row in turn and the value is dropped while the row is covered.
Conditional Section Reveal
ReactPicking an option unfolds the extra fields it requires, the section easing its height open.
Save and Continue
ReactThe button confirms the save on itself, then the finished section folds and the next opens.
Inline Edit Swap
ReactA value becomes a field where it sits: the surface arrives around the words and the row never changes size.
Input Focus Underline
ReactThe label lifts out of the field and an underline grows outward from the center on focus.
Multi Select Chips
ReactPicked options become chips in the row above the list, and the chips already there slide over to take each new one in.
OTP Paste Fill
ReactA pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.
Password Reveal Toggle
ReactDots hand over to the real characters one cell at a time as the eye takes its slash.
Quantity Adjust
ReactThe count rolls in the direction it moved and the order total takes a brief tint.
Radio Select Dot
ReactThe chosen dot springs out of its ring while the previous one lets go a little faster.
Range Double Handle
ReactTwo 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.
Required Field Mark
ReactUnanswered fields mark themselves one after another down the form — a wave, not a jolt.
Search Input Expand
ReactA search icon opens into a full field while the controls beside it give up the space.
Select Dropdown Open
ReactThe list unfolds under the field, options a beat behind the panel, current choice already marked.
Signature Draw Capture
ReactThe scrawl strokes on at hand speed and the baseline confirms once the pen lifts.
Slider Drag Value
ReactThe handle stays under the finger while held, with a value bubble that rises on grab.
Stepper Increment
ReactThe number rolls up on increase and down on decrease, so the two buttons never look alike.
Tag Input Add
ReactCommitted text lands as a chip and the caret slides along to the space it took.
Textarea Autogrow
ReactThe field takes one line-height more as the text wraps, easing into it rather than snapping.
Toggle Group Select
ReactOne highlight slides between grouped buttons and resizes to each label.
Toggle Switch Slide
ReactThe knob travels across the track while the accent fill comes up under it, settling once.