Animated Input

~0.9 kB

Last updated: September 20, 2026

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-input

Features

Smooth focus animations with floating labels and optional leading icons.

Variants

Focus an input in the panel to see the label animation for each field type.

Email

Email field with a mail icon — the default contact-form input.

Password

Password field with a lock icon — the label floats above on focus like the others.

Username

Username field with a user icon — good for registration flows.

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

The floating label is programmatically associated with the input via htmlFor and id
The aria-label attribute provides an accessible name for assistive technologies

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

Improved by

motion.dev

lucide.dev

SmoothUI

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