Docs
Components
Input OTP

Input OTP

Accessible one-time password component with copy paste functionality.

Preview

Code

[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

CLI

Manual

npx shadcn@latest add @kanpeki/input-otp

Anatomy

Single import

Multiple imports

import { InputOTP } from "~/components/ui/input-otp";

<InputOTP.Root maxLength={6}>
  <InputOTP.Group>
    <InputOTP.Slot index={0} />
    <InputOTP.Slot index={1} />
    <InputOTP.Slot index={2} />
  </InputOTP.Group>
  <InputOTP.Separator />
  <InputOTP.Group>
    <InputOTP.Slot index={3} />
    <InputOTP.Slot index={4} />
    <InputOTP.Slot index={5} />
  </InputOTP.Group>
</InputOTP.Root>;

Examples

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

Preview

Code

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

...

<InputOTP
  maxLength={6}
  pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* ... */}
  </InputOTPGroup>
</InputOTP>

Separator

You can use the <InputOTPSeparator /> component to add a separator between the input groups.

Preview

Code

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

...

<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

Controlled

You can use the value and onChange props to control the input value.

Preview

Code

Enter your one-time password.

Form

Component input-otp-form-demo not found in registry.

API Reference

InputOTP.Root

Prop	Type	Default
`maxLength`	`number`
`value`	`string`
`onChange`	`function`
`pattern`	`RegExp`
`disabled`	`boolean`
`autoFocus`	`boolean`
`containerClassName`	`string`

InputOTP.Group

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

InputOTP.Slot

Prop	Type	Default
`index`	`number`
`className`	`string`

InputOTP.Separator

Prop	Type	Default
`className`	`string`

Input Group Input

On This Page

Installation
Anatomy
Examples
Pattern
Separator
Controlled
Form
API Reference
InputOTP.Root
InputOTP.Group
InputOTP.Slot
InputOTP.Separator

Contribute