Otp Input

A React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.

src/registry/ui/otp-input.tsx/r/otp-input.json

Type 424242 to pass, anything else fails

Paste works too, and SMS autofill on phones.

Alphanumeric, large

Letters are uppercased as you type.

Type or paste a code

Installation#

bash

npx shadcn@latest add @minidev/otp-input

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/otp-input.json

Usage#

tsx

import { OtpInput } from "@/components/ui/otp-input"

export function Example() {
  return (
    <OtpInput />
  )
}

API reference#

OtpInput props
Prop	Type	Default
`length`	`number`	`6`
`value`	`string`	`-`
`defaultValue`	`string`	`""`
`onChange`	`(value: string) => void`	`-`
`onComplete`	`(value: string) => void`	`-`
`groups`	`number[]`	`-`
`pattern`	`"numeric" \| "alphanumeric"`	`"numeric"`
`status`	`Status`	`"idle"`
`disabled`	`boolean`	`-`
`autoFocus`	`boolean`	`-`
`name`	`string`	`-`
`size`	`"default" \| "lg"`	`"default"`
`className`	`string`	`-`
`aria-label`	`string`	`-`

Examples#

AuthSign-in & onboarding OTPOne-time codes

Auth CardCentered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.Forgot Password FormA password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.Join WorkspaceA centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.Magic Link FormA passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.Reset Password FormReset password card with new password and confirm password fields and a full-width Update password button, built from AuthCard, FormField and Input in React.Sign Up FormCreate account form with GitHub and Google buttons, required name, email and password fields, a submit button and a Sign in link, all inside an AuthCard.

All login and signup components

Learn more

OTP input in React: paste, autofill and accessibilityGuide All login and signup11 blocks