Animated Input
React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.
Animated Input Examples
Try focusing on the inputs to see the label animation!
Installation
npx smoothui-cli add animated-inputFeatures
- Smooth focus animations
- Floating label support
- Visual feedback on interaction
- Customizable animation timing
- Built with Framer Motion
- Accessible form input
Accessibility
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
aria-label | Input | Provides an accessible name matching the label text |
aria-hidden="true" | Icon container | Hides the decorative icon from screen readers |
Screen Reader
- The floating label is programmatically associated with the input via
htmlForandid - The
aria-labelattribute provides an accessible name for assistive technologies
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the floating label transitions are applied instantly without animation.
Props
Animated File Upload
Animated React drag-and-drop file upload component with animated file list, validation states, and smooth drag-over transitions.
Animated Progress Bar
Animated React progress bar component with smooth fill transitions, customizable colors, and multiple animation types using Motion.