OTPInput

Needs review
WCAG 2.2 evidence
RTL

A one-time code field: a label, a row of OTPCells, and a footer with the helper, status or error and an optional resend action. React Aria has no OTP primitive, so it is a React Aria TextField whose single real <input> lies under the cells: screen readers meet one labelled field with one value (WCAG 1.3.1, 4.1.2), and there is one tab stop. - Typing fills the next cell; Backspace clears the previous one; Arrow Left / Right, Home and End (Arrow Up / Down too) move between cells, and a digit typed on a filled cell replaces it. A click on a cell moves there (WCAG 2.1.1). - Paste of the whole code ("123 456" or "123-456" too) fills every cell; autoComplete="one-time-code" lets the phone offer the SMS code, and password managers can fill it (WCAG 3.3.7, 3.3.8). inputMode="numeric" shows the number pad. - Errors show an icon and text and, like the Verifying and Verified status, are announced politely (WCAG 1.4.1, 3.3.1, 4.1.3). - The focused cell draws the brand stroke and halo (2.4.7). Digits stay left-to-right in right-to-left layouts (rule G4). Consumer duties: label, helper and error wording; verifying the code (onComplete never submits a form); the countdown and re-enabling resend; explaining a disabled (locked) field in description.

import { OTPInput } from "@nexera-ui/react";

Loading example…

7
examples: 36
props: 8
live controls: 1
platform: 16
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { OTPInput } from "@nexera-ui/react";

<OTPInput />

Examples 6

The same examples as Storybook, rendered live. Open Code to copy one.

Lengths and sizes

Figma Length and Size. A six-cell code shows the separator after the third cell; cells wrap only when the container is narrower than the code.

Loading example…

app.tsx

import { OTPInput } from "@nexera-ui/react";

export function LengthsAndSizes() {
  return (
    <div className="flex flex-col gap-8">
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Verification code (lg, 4)"
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Verification code (lg, 6)"
        length={6}
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Verification code (md, 4)"
        size="md"
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Verification code (md, 6)"
        size="md"
        length={6}
      />
    </div>
  );
}

States

Semantic states: isInvalid with errorMessage and an actionable onResend, status="verifying" and status="success", isDisabled with the reason in description, and isMasked.

Loading example…

app.tsx

import { OTPInput } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-8">
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        label="Error"
        defaultValue="4821"
        isInvalid
        errorMessage="Incorrect code. 2 attempts left."
        resend="Resend code"
        onResend={() => undefined}
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Verifying"
        defaultValue="4821"
        status="verifying"
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Success"
        defaultValue="4821"
        status="success"
      />
      <OTPInput
        resend="Resend in 0:42"
        label="Disabled"
        isDisabled
        description="Too many attempts. Try again in 10:00"
      />
      <OTPInput
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        label="Masked PIN"
        isMasked
        defaultValue="48"
      />
    </div>
  );
}

Verification flow

A realistic flow: onComplete starts the verification in place (no form submission), the status line announces "Verifying" and then "Verified" or the error. Paste "123456" (or "123-456") to fill every cell at once; the correct code is 246810.

Loading example…

app.tsx

import { useEffect, useState } from "react";
import { OTPInput } from "@nexera-ui/react";

export function VerificationFlow() {
  const [code, setCode] = useState("");
  const [step, setStep] = useState<"idle" | "verifying" | "success" | "error">("idle");
  const [seconds, setSeconds] = useState(42);
  useEffect(() => {
    if (seconds === 0) return;
    const timer = setTimeout(() => {
      setSeconds((value) => value - 1);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [seconds]);
  useEffect(() => {
    if (step !== "verifying") return;
    const timer = setTimeout(() => {
      setStep(code === "246810" ? "success" : "error");
    }, 1200);
    return () => {
      clearTimeout(timer);
    };
  }, [step, code]);
  return (
    <OTPInput
      label="Verification code"
      description="Sent to +92 300 ••• 4567"
      resend="Resend in 0:42"
      value={code}
      onChange={(next) => {
        setCode(next);
        if (step === "error") setStep("idle");
      }}
      onComplete={() => {
        setStep("verifying");
      }}
      {...(step === "verifying" || step === "success" ? { status: step } : {})}
      isInvalid={step === "error"}
      errorMessage="Incorrect code. Check the SMS and try again."
      resend={seconds > 0 ? `Resend in 0:${String(seconds).padStart(2, "0")}` : "Resend code"}
      {...(seconds > 0
        ? {}
        : {
            onResend: () => {
              setSeconds(42);
            },
          })}
    />
  );
}

Long label

Long labels and helper texts wrap; at 320 px a six-cell lg code wraps its cells instead of scrolling (WCAG 1.4.10).

Loading example…

app.tsx

import { OTPInput } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-xs">
      <OTPInput
        resend="Resend in 0:42"
        length={6}
        label="Six-digit verification code that we sent to your registered mobile number"
        description="It can take up to a minute for the message to arrive. Check that your phone has signal."
      />
    </div>
  );
}

Right to left

Right-to-left: label and footer mirror; the digits stay left-to-right because a code is read in order (rule G4).

Loading example…

app.tsx

import { OTPInput } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-8">
      <OTPInput
        label="رمز التحقق"
        description="أُرسل إلى ‎+92 300 ••• 4567"
        resend="إعادة الإرسال خلال 0:42"
        defaultValue="12"
      />
      <OTPInput
        label="رمز التحقق"
        length={6}
        defaultValue="123456"
        isInvalid
        errorMessage="الرمز غير صحيح."
        resend="إعادة إرسال الرمز"
        onResend={() => undefined}
      />
    </div>
  );
}

With verify button

Buttons that a page puts next to the field: verification is never automatic on submit, so a Verify button is common.

Loading example…

app.tsx

import { Button, OTPInput } from "@nexera-ui/react";

export function WithVerifyButton() {
  return (
    <form
      className="flex max-w-sm flex-col gap-4"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <OTPInput
        label="Verification code"
        description="Sent to +92 300 ••• 4567"
        resend="Resend in 0:42"
        name="otp"
        isRequired
        errorMessage="Enter the code from the SMS."
      />
      <Button type="submit" className="self-start">
        Verify
      </Button>
    </form>
  );
}

Props 36

Press "Try it" on a card to load that prop into the playground.

lengthNexera

4 | 6

Number of cells. The value never gets longer; a pasted or autofilled code is cut to this length.

sizeNexera

"md" | "lg"

Cell size: 48 px cells 8 px apart, or 40 px cells 6 px apart.

isMaskedNexera

boolean

Show dots instead of digits. The input becomes a password field, so screen readers do not speak the digits either; the progress text still says how many are entered.

descriptionNexera

ReactNode

Helper text under the cells, for example where the code was sent. Linked with aria-describedby. Hidden while an error or a status is shown, as in Figma. In the disabled state it carries the reason ("Too many attempts. Try again in 10:00"), which Figma keeps in text/muted.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text, shown with an icon instead of the helper while the field is invalid (isInvalid, or a failed isRequired / validate after submit), linked with aria-describedby and announced politely. Say what is wrong and what to do ("Incorrect code. 2 attempts left.").

statusNexera

"verifying" | "success"

Verification status: a status line with an icon replaces the helper, the cells show Filled or Success, the field becomes read-only and the resend text is hidden. The status line is a polite live region (WCAG 4.1.3). Typing, Filled and Focused are not statuses: they follow from focus and the value.

statusMessageNexera

ReactNode

Text of the status line. Translate it for your locale.

resendNexera

ReactNode

Resend text at the end of the footer, for example "Resend in 0:42" or "Resend code". Shown when provided, except while a status is shown or the field is disabled. A countdown is plain text and is not announced on every tick.

onResendNexera

() => void

Makes resend a button. Called on click, Enter or Space. Without it the resend text is plain text (a countdown).

onCompleteNexera

(code: string) => void

Called when the code reaches length digits (typed, pasted or autofilled). Verify in place and show status; do not submit a form or navigate away on this alone (WCAG 3.2.2, no change of context on input).

progressLabelNexera

(entered: number, total: number) => string

Text read with the field (linked with aria-describedby, visually hidden) that says how many digits are entered. Translate it.

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

enterKeyHintReact Aria

An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the value is invalid.

validateReact Aria

(value: string) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

valueReact Aria

string

The current value (controlled).

defaultValueReact Aria

string

The default value (uncontrolled).

onChangeReact Aria

(value: string) => void

Handler that is called when the value changes.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

autoCompleteReact Aria

string

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

inputModeReact Aria

Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

autoCorrectReact Aria

string

An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).

spellCheckReact Aria

string

An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

13 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · tested directly
1.3.5Identify Input PurposeLevel AA · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.3Error SuggestionLevel AA · tested directly
3.3.7Redundant EntryLevel A · tested directly
3.3.8Accessible Authentication (Minimum)Level AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed

Usage

<OTPInput className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Two-step verificationSign in and account

Theme studio

OTPInput

Try every prop. Copy the code.

Examples 6

Lengths and sizes

States

Verification flow

Long label

Right to left

With verify button

Props 36

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components