Input OTP

Overview

The InputOTP component provides a user-friendly interface for entering one-time passwords or verification codes. It features animated character slots, customizable grouping with separators, and supports validation states.

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Examples

Basic

A basic OTP input with two groups separated by a dash.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>;

With Multiple Separators

OTP input with multiple groups and separators for credit card-style formatting.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>;

Numbers Only

OTP input restricted to numeric characters only using a regex pattern.

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6} pattern="^[0-9]*$">
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>;

Invalid State

OTP input showing an invalid/error state.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6} invalid>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>;

Disabled

OTP input in a disabled state.

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@tilt-legal/cubitt-components/primitives";

<InputOTP maxLength={6} disabled>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>;

API Reference

InputOTP

The root component that manages the OTP input state. Built on input-otp.

Prop	Type	Default	Description
`maxLength`	`number`	-	Maximum number of characters (required)
`value`	`string`	-	Controlled value
`onChange`	`(value: string) => void`	-	Callback when value changes
`onComplete`	`(value: string) => void`	-	Callback when all slots are filled
`pattern`	`string`	-	Regex pattern for allowed characters
`invalid`	`boolean`	`false`	Shows invalid/error styling on all slots
`disabled`	`boolean`	`false`	Disables the input
`containerClassName`	`string`	-	Class name for the container element

InputOTPGroup

Groups slots together visually.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

InputOTPSlot

Individual character slot that displays a single character.

Prop	Type	Default	Description
`index`	`number`	-	Slot position index (required)
`className`	`string`	-	Additional CSS classes

InputOTPSeparator

Visual separator between slot groups.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Input OTP

On this page