OtpInput

When to use

OtpInput is for one-time codes sent by SMS or email, and for short PINs.

When not to use

• For a password: use PasswordInput.
• For a code of unknown length: use TextInput.

Anatomy

Verification code

Enter the 6-digit code sent to you.

LightDark

Copy code

import { OtpInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <OtpInput label="Verification code" description="Enter the 6-digit code sent to you." groupSize={3} />
    </Provider>
  );
}

1. Label: Bound to the first box.
2. Boxes: 32, 36 or 40 px squares joined into one strip; one character each. With groupSize, each group is its own strip. The empty active box shows a blinking caret.
3. Separator: With groupSize; screen readers skip it.
4. Description and error: Under the code.

Behaviour

• Typing moves focus to the next box; Backspace goes back. The left and right arrows move between boxes.
• Paste and the browser’s one-time-code suggestion (autocomplete="one-time-code") fill all boxes.
• Characters outside validationType are dropped.
• The code is sent as one value. purpose defaults to confirm: a code that approves an action, such as a payment, never submits itself; the user presses the submit button. autoSubmit works only with purpose="login" and sends the form when the code is complete; with confirm it is ignored with a development warning. Both purposes use autoComplete="one-time-code".

Guidelines

• Say where the code was sent in the description.
• On a wrong code, clear the value and put focus on the first box; show the error under the code.
• For resending, put a button with a CountdownTimer under the code.
• Use mask only for secret codes such as a PIN; an SMS code is not hidden.

Content

• Label: “Verification code”. Description: “Enter the 6-digit code sent to you.”

Turkish	English
Hane {index} / {length}	Digit {index} of {length}
Karakter {index} / {length}	Character {index} of {length}

Related components

• PasswordInput: A password.
• CountdownTimer: Time until a resend.