Input OTP

Accessible one-time password component with copy paste functionality.

Dependencies

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

About

Input OTP is built on top of input-otp by @guilherme_rodz.

Installation

npx @kosori/cli add components input-otp

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '~/components/ui/input-otp';

<InputOTP
  maxLength={6}
  render={({ slots }) => (
    <>
      <InputOTPGroup>
        {slots.slice(0, 3).map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        {slots.slice(3).map((slot, index) => (
          <InputOTPSlot key={index + 3} {...slot} />
        ))}
      </InputOTPGroup>
    </>
  )}
/>

Examples

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'; 
 
...
 
<InputOTP
  maxLength={6}
  pattern={REGEXP_ONLY_DIGITS_AND_CHARS} 
  render={({ slots }) => (
    <>
      <InputOTPGroup>
        {slots.map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}
      </InputOTPGroup>
    </>
  )}
/>

Separator

You can use the <InputOTPSeparator /> component to add a separator between the input groups.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator, 
  InputOTPSlot,
} from '~/components/ui/input-otp';
 
...
 
<InputOTP
  maxLength={6}
  render={({ slots }) => (
    <>
      <InputOTPGroup>
        {slots.slice(0, 2).map((slot, index) => (
          <InputOTPSlot key={index} {...slot} />
        ))}
      </InputOTPGroup>
      <InputOTPSeparator /> // [!code highlight]
      <InputOTPGroup>
        {slots.slice(2, 4).map((slot, index) => (
          <InputOTPSlot key={index + 2} {...slot} />
        ))}
      </InputOTPGroup>
      <InputOTPSeparator /> // [!code highlight]
      <InputOTPGroup>
        {slots.slice(4).map((slot, index) => (
          <InputOTPSlot key={index + 4} {...slot} />
        ))}
      </InputOTPGroup>
    </>
  )}
/>

Controlled

You can use the value and onChange props to control the input value.

Enter your one-time password.