Animated OTP Input

One-time-password input with focus and reveal animations.

~8.9 kB

Last updated: March 7, 2026

Verify Your Code

Enter the 6-digit code sent to your device

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

npx smoothui-cli add animated-o-t-p-input

npx smoothui-cli add animated-o-t-p-input

Features

Auto-advance and backspace support
Animated focus and validation
Masking options
Accessible and mobile-friendly

Accessibility

Keyboard Interactions

Key	Description
`0-9`	Enters a digit and auto-advances to the next slot
`Backspace`	Deletes the current digit and moves focus to the previous slot
`Tab`	Moves focus to/from the OTP input

ARIA Attributes

Attribute	Element	Purpose
`aria-label`	OTP input	Provides an accessible name (defaults to "One-time password input")
`aria-describedby`	OTP input	References an optional description element for additional context

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, slot entrance animations, digit flip transitions, and the blinking caret are all disabled.