One-time code

A row of cells, one per digit, for a one-time code sent by email or text, with paste filling every cell and an optional separator.

ui.otp-fieldcomponents/ui/otp-field.tsx

Use case

For the AI

Use it on the step where a person types a code they were sent: signing in with an email code, confirming a phone number, a two-step check. Pasting the whole code fills every cell, and onValueComplete fires once the last cell is filled, so the code can be checked without a button.

Use it when

Signing in with a code sent by email or text
Confirming an email address or a phone number
A two-step verification code

Use something else when

A password: Input group
A long number typed once (an account or an invoice number): Input

Examples

Six digits

Code

Import

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

Usage

<OTPField
  length={6}
  aria-label="One-time code"
  value={code}
  onValueChange={setCode}
  onValueComplete={(value) => verify(value)}
  disabled={checking}
>
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldSeparator />
  <OTPFieldInput />
  <OTPFieldInput />
  <OTPFieldInput />
</OTPField>

Rules

length equals the number of OTPFieldInput cells and the length of the code sent.
Name it with aria-label (or a FieldLabel in a Field).
Check the code in onValueComplete, disable the field while it is checked, and mark a refused code with aria-invalid on each OTPFieldInput.
An OTPFieldSeparator in the middle splits a six-digit code into two threes.
size is default or lg.