Input OTP

A one-time password input with individual character slots, caret animation, and paste support for verification codes.

Input OTP

Verify your email

Enter the 6-digit code we sent to your inbox.

[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

pnpm dlx shadcn@latest add @sortui/input-otp

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@/components/ui/input-otp"

Examples

Cells

Verify your identity

We’ve sent an email with your code to hey@example.com

Digits only

Verify your identity

We’ve sent an email with your code to hey@example.com

Separator

Verify your identity

We’ve sent an email with your code to hey@example.com

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access