OTP Field

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

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

Verification code

mirrored code: 123

Verification code

Enter the code from your message.

Recovery code

API Reference

OTPField

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

Prop	Type	Default
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`union`	`—`
	`number`	`—`
	`boolean`	`false`
	`function`	`—`
	`OTPValidationType`	`'numeric'`

	`string`	`—`
	`string`	`—`
	`function`	`—`

OTPFieldSeparator

A separator visually divides groups of inputs within the OTP field.

Prop	Type	Default
	`Orientation`	`'horizontal'`

Last updated on 6/12/2026