OtpInput

Code

import { Field, FieldLabel, OtpInput } from "@fadymondy/nasaq/web";export function VerifyField() {  return (    <Field className="w-fit">      <FieldLabel>Verification code</FieldLabel>      <OtpInput name="code" onComplete={(code) => console.log(code)} />    </Field>  );}

Forms · beta

Live examples and controls: OtpInput in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/otp-input.json

A row of single-character boxes for verification codes and PINs. Typing advances, Backspace steps back, paste (or an SMS autofill) fills all boxes at once. The group is always left-to-right so a code reads the same in Arabic pages.

When to useCopy Anchor Link

• SMS, email or authenticator codes; short PINs.

When not to useCopy Anchor Link

• Long or free-form tokens: use Input.

ImportCopy Anchor Link

import { OtpInput } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Field, FieldLabel, OtpInput } from "@fadymondy/nasaq/web";

export function VerifyField() {
  return (
    <Field className="w-fit">
      <FieldLabel>Verification code</FieldLabel>
      <OtpInput name="code" onComplete={(code) => console.log(code)} />
    </Field>
  );
}

AnatomyCopy Anchor Link

OtpInput            data-slot="otp-input" (role="group", dir="ltr")
├─ box × length     data-slot="otp-input-box" (Base UI Input; data-filled when it has a character)
└─ hidden input     only when `name` is set; carries the joined code

APICopy Anchor Link

Other props go to the wrapping div.

ExamplesCopy Anchor Link

Four-digit PIN, controlled, Arabic labels:

import { Field, FieldLabel, OtpInput } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Pin() {
  const [pin, setPin] = useState("");
  return (
    <Field className="w-fit">
      <FieldLabel>الرمز السري</FieldLabel>
      <OtpInput
        length={4}
        value={pin}
        onValueChange={setPin}
        getBoxLabel={(i, n) => `الخانة ${i + 1} من ${n}`}
      />
    </Field>
  );
}

AccessibilityCopy Anchor Link

Boxes use autocomplete="one-time-code" so mobile keyboards offer the SMS code. Each box has an accessible name from getBoxLabel; the group is role="group".

RTL & i18nCopy Anchor Link

dir="ltr" is set on the group, so the first digit is on the left even on RTL pages. The surrounding label and messages still follow the page direction. Localise getBoxLabel.

Styling & tokensCopy Anchor Link

Uses border-input, bg-card, border-nq-focus, border-nq-danger, size-control, rounded-control. State attributes: data-filled, data-invalid. Extend with className (on the group).

Do / Don'tCopy Anchor Link

• Do show where the code was sent in the field description.
• Don't use it for values longer than about 8 characters.

RelatedCopy Anchor Link

• Field
• InputGroup

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-otpinput--docs