OTP Field

An OTP field lets users enter a one-time passcode across multiple single-character inputs.

On this page

Verification code

<OTPField length={6}>
  <Label>Verification code</Label>
  <div className="flex items-center">
    <Group>
      <Input />
      <Input aria-label="Digit 2" />
      <Input aria-label="Digit 3" />
    </Group>
    <OTPFieldSeparator className="px-2 text-fg-muted">-</OTPFieldSeparator>
    <Group>
      <Input aria-label="Digit 4" />
      <Input aria-label="Digit 5" />
      <Input aria-label="Digit 6" />
    </Group>
  </div>
</OTPField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/otp-field

Usage

Use OTPField with Group and the existing Input component to compose passcode slots.

import { OTPField } from '@/components/ui/otp-field'
import { Label } from '@/components/ui/field'
import { Group } from '@/components/ui/group'
import { Input } from '@/components/ui/input'

<OTPField length={6}>
  <Label>Verification code</Label>
  <Group>
    <Input />
    <Input aria-label="Digit 2" />
    <Input aria-label="Digit 3" />
    <Input aria-label="Digit 4" />
    <Input aria-label="Digit 5" />
    <Input aria-label="Digit 6" />
  </Group>
</OTPField>

Examples

Basic OTP Field

Verification code

Verification Form

2FA Verification

Email Verification

API Reference

OTPField