OTP Field

Installation

npx baseui-cn add otp-field

Usage

import { OTPField, OTPFieldInput, OTPFieldSeparator } from "@/components/ui/otp-field"

<OTPField length={6}>
  <OTPFieldInput />
  <OTPFieldInput aria-label="Character 2 of 6" />
  <OTPFieldInput aria-label="Character 3 of 6" />
  <OTPFieldSeparator aria-hidden="true">-</OTPFieldSeparator>
  <OTPFieldInput aria-label="Character 4 of 6" />
  <OTPFieldInput aria-label="Character 5 of 6" />
  <OTPFieldInput aria-label="Character 6 of 6" />
</OTPField>

Examples

Form integration

Use the OTP field inside Form and Field when you want one named value submitted to your action.

Auto submit with feedback

Use autoSubmit when the form should verify immediately after the last slot is filled. This example keeps the feedback inside your existing Base UI stack with button loading state and a success toast.

Alphanumeric codes

Use validationType="alphanumeric" for recovery, invite, or backup codes that mix letters and numbers.

Grouped layout

Wrap subsets of inputs in your own layout elements and use OTPFieldSeparator when you want a chunked visual format like 123-456.

Connected slots

Use a zero-gap layout with shared borders when you want the OTP field to read like one combined control.

Reset and refocus

Use a controlled value when you want to clear the current code and move focus back to the first slot for another attempt.

API

OTPField

OTPFieldInput and OTPFieldSeparator inherit size from the parent context and accept a size prop to override locally.