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

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

Prop	Type	Default
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`false`
	`union`	`—`
	`string`	`—`
	`number`	`—`
	`boolean`	`false`
	`union`	`—`
	`((value: string) => string)`	`—`
	`OTPValidationType`	`'numeric'`

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

Last updated on 5/22/2026