OTP Field

Last updated: October 14, 2026

One-time-passcode digit inputs with paste and keyboard navigation, Base UI twin and Radix-parity twin.

Installation

npx smoothui-cli add otp-field

Configurable length (default 6)
Paste fills consecutive slots
Optional mask for shared screens
Compound parts: OTPFieldRoot, OTPFieldInput
Base UI by default; Radix twin is a hand-rolled multi-input (Radix has no OTP Field)

A six-digit verification code.

Characters are obscured.

Provide a visible label or an aria-label. Each subsequent slot announces its position.

base-ui

SmoothUI

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