OTP Field

A high-quality, styled React OTP field component built with @base-ui/react for one-time password and verification code entry.

The OTPField component provides accessible character slot inputs for one-time password and verification code entry.

Usage

import { OTPField } from "@/components/ui/otp-field";

export function ExampleOTPField() {
  return (
    <OTPField.Root length={6}>
      <OTPField.Input aria-label="Character 1 of 6" />
      <OTPField.Input aria-label="Character 2 of 6" />
      <OTPField.Input aria-label="Character 3 of 6" />
      <OTPField.Separator />
      <OTPField.Input aria-label="Character 4 of 6" />
      <OTPField.Input aria-label="Character 5 of 6" />
      <OTPField.Input aria-label="Character 6 of 6" />
    </OTPField.Root>
  );
}

Preview

Sizes

<OTPField.Root length={6} size="sm">...</OTPField.Root>
<OTPField.Root length={6} size="md">...</OTPField.Root>
<OTPField.Root length={6} size="lg">...</OTPField.Root>

Custom Styling

Apply custom slot border colors, focus ring accents, or rounded corners via className:

<OTPField.Input className="border-2 border-indigo-500/30 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 rounded-xl" />

Styling & Class Names

Target internal OTP field CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.otp-field`	Root container	Main OTP slot row container.
`.otp-field__input`	Input slot	Individual digit input slot box.
`.otp-field__separator`	Separator symbol	Dash or separator icon between slot groups.

Anatomy

import { OTPField } from "@base-ui/react/otp-field";

<OTPField.Root>
  <OTPField.Input />
  <OTPField.Separator />
</OTPField.Root>;

API Reference

OTPField.Root Props

Prop	Type	Default	Description
`length`	`number`	-	The number of OTP input slots (Required).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimension size of the slot inputs.
`value`	`string`	`undefined`	Controlled OTP value.
`defaultValue`	`string`	`undefined`	Initial uncontrolled OTP value.
`validationType`	`'numeric' \| 'alpha' \| 'alphanumeric' \| 'none'`	`'numeric'`	Input validation mode applied to characters.
`mask`	`boolean`	`false`	Obscures characters as password inputs.
`autoSubmit`	`boolean`	`false`	Submits the parent form when all slots are filled.
`onValueChange`	`(value: string) => void`	`undefined`	Callback fired when the OTP value changes.
`onValueComplete`	`(value: string) => void`	`undefined`	Callback fired when all slots are filled.
`disabled`	`boolean`	`false`	Disables user interaction.

OTP Field

On this page