Input OTP

A one-time password input component for verification codes, ready for CMS integration.

CMSPayload CMS Integration

OTP inputs can be configured through CMS fields, allowing content editors to customize labels, number of digits, and validation messages without code changes.

CMS Demo

See how content editors configure OTP inputs in a CMS:

Verification Code

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

Enter the 6-digit code sent to your phone

CMS FieldsEN

Label

Help Text

Number of Digits

Show Separator

Disabled

This simulates how a content editor configures OTP inputs in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS OTP fields with localization

Payload Form Example

// In your Payload CMS form config
export const VerificationForm = {
  slug: "verification-form",
  fields: [
    {
      name: "otpField",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true },
        { name: "length", type: "number", defaultValue: 6 },
        { name: "helpText", type: "text", localized: true },
      ],
    },
  ],
}

Rendering the Form

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@mordecai-design-system/ui"

export function VerificationForm({ data }) {
  const field = data.otpField
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">{field.label}</label>
      <InputOTP maxLength={field.length}>
        <InputOTPGroup>
          {Array.from({ length: field.length }).map((_, i) => (
            <InputOTPSlot key={i} index={i} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <p className="text-xs text-muted-foreground">{field.helpText}</p>
    </div>
  )
}

Basic Usage

Input OTPA 6-digit OTP input

Installation

pnpm add @corew500/ui

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@mordecai-design-system/ui"

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

Examples

With Separator

<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>

Controlled

const [value, setValue] = useState("")

<InputOTP maxLength={6} value={value} onChange={setValue}>
  ...
</InputOTP>

Pattern Validation

// Only allow numbers
<InputOTP maxLength={6} pattern="[0-9]*">
  ...
</InputOTP>

Props

InputOTP

Prop	Type	Default	Description
`value`	string	—	—
`onChange`	(newValue: string) => unknown	—	—
`maxLength*`	number	—	—
`textAlign`	enum	—	—
`onComplete`	(...args: any[]) => unknown	—	—
`pushPasswordManagerStrategy`	enum	—	—
`pasteTransformer`	(pasted: string) => string	—	—
`containerClassName`	string	—	Additional class name for the container element
`noScriptCSSFallback`	string	—	—
`render`	InputOTPRenderFn	—	—

InputOTPSlot

Prop	Type	Default	Description
`index*`	number	—	Zero-based index of this slot within the OTP input