← All patterns

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

React

A 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.

formsminimalcalm
interactive

Checkbox Check Draw

React

The box fills from its center and the tick strokes itself in over the fill.

formsminimalfriendly
interactive

Color Picker Swatch

React

A ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.

formsenergeticpremium
interactive

Combobox Filter Narrow

React

Typing fades out the options that no longer match while the survivors slide up.

formsminimalfuturistic
interactive

Currency Input Format

React

Separators fade in where they belong as the amount groups itself, and the caret holds its place.

formsminimalpremium
interactive

Date Picker Open

React

The calendar unfolds from the field and the days arrive in a wave, today already marked.

formselegantpremium
interactive

Field Reorder Drag

React

A row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.

formspremiumfriendly
interactive

File Drop Zone Active

React

The dashed outline energizes and the target lifts off the page while a file is held over it.

formsfriendlyenergetic

Form Autosave Indicator

React

A field that kept itself pulses its border once and writes the time underneath.

formssubtlecalm
interactive

Form Reset Clear

React

A wash crosses each row in turn and the value is dropped while the row is covered.

formscalmminimal
interactive

Conditional Section Reveal

React

Picking an option unfolds the extra fields it requires, the section easing its height open.

formscalmminimal
interactive

Save and Continue

React

The button confirms the save on itself, then the finished section folds and the next opens.

formspremiumcalm
interactive

Inline Edit Swap

React

A value becomes a field where it sits: the surface arrives around the words and the row never changes size.

formselegantminimal
interactive

Input Focus Underline

React

The label lifts out of the field and an underline grows outward from the center on focus.

formssubtleelegant
interactive

Multi Select Chips

React

Picked options become chips in the row above the list, and the chips already there slide over to take each new one in.

formsfriendlyminimal
interactive

OTP Paste Fill

React

A pasted block of digits lands in the boxes as a quick left-to-right cascade instead of appearing all at once.

formsfriendlyenergetic
interactive

Password Reveal Toggle

React

Dots hand over to the real characters one cell at a time as the eye takes its slash.

formssubtleminimal
interactive

Quantity Adjust

React

The count rolls in the direction it moved and the order total takes a brief tint.

formsfriendlyenergetic
interactive

Radio Select Dot

React

The chosen dot springs out of its ring while the previous one lets go a little faster.

formsminimalsubtle
interactive

Range Double Handle

React

Two 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.

formspremiumminimal

Required Field Mark

React

Unanswered fields mark themselves one after another down the form — a wave, not a jolt.

formscalmsubtle
interactive

Search Input Expand

React

A search icon opens into a full field while the controls beside it give up the space.

formsminimalelegant
interactive

Select Dropdown Open

React

The list unfolds under the field, options a beat behind the panel, current choice already marked.

formsminimalelegant
interactive

Signature Draw Capture

React

The scrawl strokes on at hand speed and the baseline confirms once the pen lifts.

formspremiumelegant
interactive

Slider Drag Value

React

The handle stays under the finger while held, with a value bubble that rises on grab.

formsfriendlyenergetic
interactive

Stepper Increment

React

The number rolls up on increase and down on decrease, so the two buttons never look alike.

formsminimalfriendly
interactive

Tag Input Add

React

Committed text lands as a chip and the caret slides along to the space it took.

formsfriendlyenergetic
interactive

Textarea Autogrow

React

The field takes one line-height more as the text wraps, easing into it rather than snapping.

formscalmminimal
interactive

Toggle Group Select

React

One highlight slides between grouped buttons and resizes to each label.

formsminimalfriendly
interactive

Toggle Switch Slide

React

The knob travels across the track while the accent fill comes up under it, settling once.

formsfriendlyminimal