Animated Input
React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.
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.