Dev Design LibraryAnimated Text Input Components
Dev Design Library indexes 90 Animated text input components from 36 open-source UI libraries, with the most coming from UI Lab, Spectrum UI, Kinetics, ReactFrame and Arc Library. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the text input components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Text input components belong to the Inputs group.
Curved InputReact Bits · ReactArc-bent input bar with text, caret and submit button all following the curve.
Text FieldRadix Themes · React
Halo SearchCult UI · ReactSearch input with animated gradient border, staggered placeholder, blur deletion on clear, loading line, and Warp…
Error State Shaketransitions.dev · HTML/CSSInput that shakes sideways when the value is invalid.
Input with pulsed background animationReUI · ReactInput with pulsed background animation
Button SearchAmicro Micro Transitions · React
Command PaletteKokonut UI · React⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
Morphing SearchbeUI · ReactSearch field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.
OTP InputRare UI · ReactA one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
Exploding InputSpell UI · ReactInput component that spawns particle effects when typing.
Gooey SearchVengeance UI · ReactMorphing gooey blob search button with animated results
Input CopyFluid Functionalism · ReactRead-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.
Otp InputPanel UI · React NativeOne-time-code field drawn as a row of separate cells.
Autocomplete-04 - Team Member SearchShadcn Space · ReactAutocomplete with grouped team members, avatars, status dots, and spring-animated list items
Floating Label Field InputOpenSourceUI · React
Inline Edituselayouts · ReactAn input that switches between read and edit modes.
Error ShakeKinetics · HTML/CSSDecaying horizontal oscillation, retriggerable
Spell Exploding InputAnimations (Svelte) · Svelte
Input CopyNexvyn UI · ReactA copy-to-clipboard field that shows a monospace value with an icon or button trigger, animating a checkmark on copy.
Morph Search CapsuleRewamp UI · ReactSleek, tactile search pill capsule with click ripple physics and a buttery-smooth fluid SVG morph transition between…
Secure InputAI CSS · React
Expanding searchArc Library · ReactAn icon that morphs into a search field with results beneath it.
Caps Lock WarningUI Lab · ReactA small caps lock key with its light on slides into the field when caps is on.
Input OTPHextaUI · ReactOne-time code slots that take typing, paste and SMS autofill, with an opt-in animation that cascades codes in and a…
Number inputCojeev UI · ReactA number field with readable formatting, a native editing caret and expressive stepping.
Focus FieldMicroKit · ReactAn input with a clean animated focus treatment.
Vanish InputVelora UI · ReactSearch field whose placeholder cycles while empty.
End Loading Spinnersv-particles · Svelte
Otp InputPin UI · React
Currency SwitchZAYX · React Native
Liquid Text FieldLiquefy UI · ReactText input field in liquid glass style.
Morphing SearchEaseUI · ReactA circular search button that morphs into a text field: the same element grows and reshapes via a layout animation…
OTP InputOpaline · ReactOne-time code cells on glass with a gliding lens, paste and SMS autofill, and success / error states.
Currency InputReactFrame · ReactA money input with a currency picker: live thousands separators for any locale, the right number of decimals per…
Gooey InputAceternity UI · React
Scrub FieldReact Bits · ReactNumber chip you drag to scrub: the value follows the hand, pushes past the range on a rubber band, and a click without…
Input Clear With Dissolvetransitions.dev · HTML/CSSInput whose text dissolves away when the clear button is pressed.
Button VisibilityAmicro Micro Transitions · React
AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
Otp InputbeUI · ReactOne-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
Password InputRare UI · ReactA password field with an eye toggle to show or hide what you type, and a strength meter that shows the password level…
Command SearchSpectrum UI · ReactA command palette that types queries and live-filters grouped results, with keyboard navigation.
Input GroupFluid Functionalism · ReactGrouped input fields with fluid hover highlighting, animated label transitions, optional icons, and error states.
Search BarPanel UI · React NativeSearch field with a clear button, a Cancel button and a panel of results.
Autocomplete-05 - Async SearchShadcn Space · ReactAutocomplete with debounced async search, loading spinner, error handling, avatars, and spring-animated results
Morphing Inputuselayouts · ReactAn input field that morphs between different states.
Expanding SearchKinetics · HTML/CSSField grows on hover or focus, glide easing
Password InputNexvyn UI · ReactA password input with an animated eye toggle that follows your cursor and blinks periodically.
Money inputArc Library · ReactA currency field with live grouping, stable width, rolling digits, and minor-unit output.
Email Typo FixUI Lab · ReactCatches gmial.com and fixes it by moving only the letters that were wrong.
Scrub Number FieldMicroKit · ReactA number field you drag to scrub and click to type, with a ruler that tracks the gesture.
Loading Spinnersv-particles · Svelte
Otp InputEaseUI · ReactOne box per digit for a verification code, with paste and SMS autofill support and a shake for a wrong code.
Glass StepperOpaline · ReactCapsule stepper with rolling digits, hold-to-accelerate and a shake at the limits.
Input OTPReactFrame · ReactA one-time-code input with individual animated cells, paste and autofill support, numeric or alphanumeric mode…
InputAceternity UI · React
Team SelectorKokonut UI · ReactSeat picker with a scrubbable number, generated avatars and an optional rolling price line.
Web SearchRare UI · ReactThe sources behind an AI answer, shown as a search pill, source cards, a streaming answer, and inline citations.
Floating Label InputSpectrum UI · Reactcomponent for the Floating Label Input
Sidebar Search FieldFluid Functionalism · ReactHeader search on the menu rows' rhythm: leading icon on the rows' 16px axis, text on the 32px axis, and a…
Dropdown Menu 05 - SearchShadcn Space · ReactA search dropdown that expands in place with live filtering, category chips, recent and trending searches, and…
Floating LabelKinetics · HTML/CSSPlaceholder lifts into a label on focus — pure CSS
Number fieldArc Library · ReactEnter a bounded number with clear increment controls.
Expanding SearchUI Lab · ReactOpens from a circle into a search field, and closes faster than it opens.
Start Loading Spinnersv-particles · Svelte
Tag InputEaseUI · ReactA field that turns what you type into tags. Enter or a comma adds one, Backspace marks then removes the last, and a…
Password InputReactFrame · ReactA password field with an animated show/hide eye toggle, a four-segment strength meter, a live requirements checklist…
Placeholders And Vanish InputAceternity UI · React
Link Search FooterSpectrum UI · ReactType-to-filter across every footer link, with arrow-key navigation.
Password MeterKinetics · HTML/CSSSegments fill and shift color as strength climbs
Password strengthArc Library · ReactShow how strong a new password is while it is typed.
Eye ToggleUI Lab · ReactThe eye shuts when your password is hidden and watches while you type.
Phone InputReactFrame · ReactA phone number input with a searchable country menu: flags and calling codes, as-you-type formatting per country…
Page Not FoundSpectrum UI · ReactA 404 that prints the path it tried and filters real destinations as you type.
Quantity StepperKinetics · HTML/CSSValue pops on each change; clamps at zero
Phone inputArc Library · ReactA phone field with a country picker, formatting as you type, and E.164 output.
Floating LabelUI Lab · ReactThe label peels up letter by letter, and never covers what you wrote.
Product ListReactFrame · ReactAn eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a…
Password StrengthSpectrum UI · ReactA password input with an animated four-segment strength meter, crossfading strength label, requirements checklist with…
Vector RecallKinetics · HTML/CSSNearest embeddings drift in as a query ring sweeps the space
Number StepperUI Lab · ReactRolls each digit the way the count moves, and speeds up the longer you hold.
Search BarReactFrame · ReactAn accessible animated search field with a live suggestions menu, keyboard navigation, a clear button, a loading…
Quantity StepperSpectrum UI · ReactAn animated quantity input for carts and forms with rolling digits, hold-to-repeat acceleration, and a boundary shake
Otp InputUI Lab · ReactSix slots mirror one real input, so paste and SMS autofill just work.
No Search ResultsSpectrum UI · ReactA no-results state that echoes the query and resolves when a suggestion is taken.
Password FieldUI Lab · ReactReveals the password with a wave of dots turning into letters; the meter fills as it gets stronger.
Web SearchSpectrum UI · ReactAgent search results with a live reading indicator.
Shortcut RecorderUI Lab · ReactPress keys to set a shortcut: keycaps appear as you hold them, and it tells you when a combo is taken.
Tally CounterUI Lab · ReactCounts in hand-drawn tally marks, one pen stroke at a time.
Libraries with Animated text input components
Related categories
- Text Input Components
- React Text Input Components
- Tailwind CSS Text Input Components
- Svelte Text Input Components
- shadcn/ui Text Input Components
- Animated Input Components
- Animated Select Components
- Animated Slider Components
- Animated Switch Components
- Animated Form Components
- Animated Textarea Components
- Animated Search Input Components
- Animated Checkbox Components
- Animated Segmented Control Components
- Animated Form Field Components
- Animated Rating Components
- Animated File Upload Components
- Animated Range Slider Components
- Animated Wheel Picker Components
- Animated Knob Components
- Animated Color Picker Components