Inputs Micro Interactions
Explore input micro interactions for password visibility, autosave, validation, formatting, character counts, and suggestions. Build forms that help users enter and correct information.
Adornments
Copy confirm
Prefix reveal
Suffix fade
Autosaves in this tab
Confirm delayed state
- Design system
Clear to show all projects
Clear fade
Focus
Verification code
Type or paste four digits
Segment fill
Typing
Auto-grow
0/80
Counter tick
0 of 60 characters used
Ring drain
Strength fill
0 words
Count spring
designmotion
Chip pop-in
Toolbar reveal
Digit grouping
Mask fill
/blog/your-post-title
Build derived value
Filter triggered suggestions
Validation & Error
At least 3 characters.
Inline validation
Check the email address
Invalid submit shake
Did you mean gmail.com?
Offer inline correction
Confirm matching values
Toggle Caps Lock to try