GuidesComponentsBlocksTemplatesCommunity

Animated Input

React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.

Open in v0
~0.9 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add animated-input

Features

  • Smooth focus animations
  • Floating label support
  • Visual feedback on interaction
  • Customizable animation timing
  • Built with Framer Motion
  • Accessible form input

Accessibility

ARIA Attributes

AttributeElementPurpose
aria-labelInputProvides an accessible name matching the label text
aria-hidden="true"Icon containerHides the decorative icon from screen readers

Screen Reader

  • The floating label is programmatically associated with the input via htmlFor and id
  • The aria-label attribute 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

Created by

Edu Calvo's avatar
Edu Calvo

Improved by

Eduardo Calvo's avatar

Powered by

motion.dev
lucide.dev
SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.

© 2026 SmoothUI. Built by Eduardo Calvo.