Input OTP
One-time-code entry with per-character slots.
Overview
One-time-password entry built on the input-otp library: a hidden real input
(so paste, autofill and mobile OTP suggestions work) rendered as per-character
slots in the kit's field chrome. The active slot lifts with the primary ring
and shows a blinking caret; aria-invalid switches the frame to the error
tone.
$ npx morpha-ui add input-otpExamples
Grouped with separator
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add input-otp. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add input-otpAPI Reference
Prop
Type
Accessibility
- The visible slots are presentation; a real single input underneath receives focus, paste and autofill (
autocomplete="one-time-code"friendly). - Label the input (
aria-label="One-time password"), and the caret blink is dropped under reduced motion.