OtpInput

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Each character has its own box, but the code is one tab stop. groupSize splits the boxes into groups.

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>
  );
}

States

Partly filled, invalid, masked (PIN) and disabled.

Verification code

Verification code

The code is wrong. Try again.

Verification code

Verification code

LightDark

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col gap-xl">
        <OtpInput label="Verification code" defaultValue="123" groupSize={3} />
        <OtpInput label="Verification code" defaultValue="123456" error="The code is wrong. Try again." />
        <OtpInput label="Verification code" defaultValue="1234" length={4} mask />
        <OtpInput label="Verification code" disabled />
      </div>
    </Provider>
  );
}

Verification

onValueComplete runs on the last character; on a wrong code, clear the value and show an error.

Verification code

The right code: 123456

LightDark

Copy code

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

export default function Verify() {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);
  return (
    <Provider locale="en-GB">
      <OtpInput
        label="Verification code"
        description="The right code: 123456"
        groupSize={3}
        value={value}
        onValueChange={(next) => {
          setValue(next);
          setError(false);
        }}
        onValueComplete={(code) => {
          if (code !== '123456') {
            setError(true);
            setValue('');
          }
        }}
        {...(error ? { error: 'The code is wrong. Try again.' } : {})}
      />
    </Provider>
  );
}

Light and dark mode

A filled box turns to the color-surface-sunken background and a strong border.

Light

Verification code

Verification code

The code is wrong. Try again.

Verification code

Verification code

Dark

Verification code

Verification code

The code is wrong. Try again.

Verification code

Verification code

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col gap-xl">
        <OtpInput label="Verification code" defaultValue="123" groupSize={3} />
        <OtpInput label="Verification code" defaultValue="123456" error="The code is wrong. Try again." />
        <OtpInput label="Verification code" defaultValue="1234" length={4} mask />
        <OtpInput label="Verification code" disabled />
      </div>
    </Provider>
  );
}