Animated Form Field Components

Dev Design Library indexes 21 Animated form field components from 15 open-source UI libraries, with the most coming from sv-particles, Kokonut UI, MicroKit, UI Lab and Pixel Perfect. 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 form field components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Form field components belong to the Inputs group.

• Text FieldRadix Themes · React
• Input with pulsed background animationReUI · ReactInput with pulsed background animation
• Card FieldKokonut UI · ReactA one-row card input for checkout. The number groups the way the brand prints it, then slides to its last four to make…
• Floating Label InputSpectrum UI · Reactcomponent for the Floating Label Input
• Input GroupFluid Functionalism · ReactGrouped input fields with fluid hover highlighting, animated label transitions, optional icons, and error states.
• Flow FieldPixel Perfect · ReactParticles stream along curl-noise currents that reform the image.
• Floating Label Field InputOpenSourceUI · React
• Floating LabelKinetics · HTML/CSSPlaceholder lifts into a label on focus — pure CSS
• Secure InputAI CSS · React
• Shortcut recorderArc Library · ReactRecord key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.
• Card InputUI Lab · ReactFormats as you type, spots the card brand, and flips to show the CVC.
• Focus FieldMicroKit · ReactAn input with a clean animated focus treatment.
• End Loading Spinnersv-particles · Svelte
• Spatial fieldMetal UI · React + SwiftUIOne quiet, content-aware dot field for a Place. It yields to object footprints and reinforces the host-selected Region…
• Liquid Text FieldLiquefy UI · ReactText input field in liquid glass style.
• Dot FieldKokonut UI · ReactA halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
• Pixel Displace FieldPixel Perfect · ReactA pixelated spiral of grid-locked squares that scatter away from the cursor and spring back.
• Floating LabelUI Lab · ReactThe label peels up letter by letter, and never covers what you wrote.
• 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
• Start Loading Spinnersv-particles · Svelte

Libraries with Animated form field components

• sv-particles
• Kokonut UI
• MicroKit
• UI Lab
• Pixel Perfect

Related categories

• Form Field Components
• React Form Field Components
• Tailwind CSS Form Field Components
• Svelte Form Field Components
• shadcn/ui Form Field Components
• Animated Input Components
• Animated Text 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 Rating Components
• Animated File Upload Components
• Animated Range Slider Components
• Animated Wheel Picker Components
• Animated Knob Components
• Animated Color Picker Components