Neumorphism UI

Input OTP

Use InputOTP for a fixed-length verification code displayed as individual character slots.

Preview

Six-digit code

Arrange six code slots into two groups of three around a visual separator.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/input-otp

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Set maxLength, provide a name, and render one InputOTPSlot for each index. Use groups and separators only for visual organization; the value remains one input.

"use client";

import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";

export default function Example() {
  return (
    <InputOTP maxLength={4} aria-label="Verification code" autoComplete="one-time-code">
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  );
}

API Reference

Uses input-otp for focus, paste, and automatic advancement while styling only the visual slots with neumorphic surfaces. Multiple boxes are visible, but the accessibility tree and form value remain a single input.

ComponentPropTypeDefaultDescription
InputOTPmaxLengthrequirednumber—Sets the allowed verification-code length.
InputOTPvalue / defaultValuestring—Sets the controlled or initial uncontrolled code value.
InputOTPonChange(value: string) => void—Runs when the complete code value changes.
InputOTPcontainerClassNamestring—Extends the outer container that wraps slot groups.
InputOTPSlotindexrequirednumber—Selects which position of the complete code this visual slot displays.

Accessibility

  • 01

    Give InputOTP an aria-label or associated label that explains the verification code purpose.

  • 02

    Although multiple slots are visible, keep one real input instead of exposing one textbox per character.

  • 03

    Do not block paste or keyboard entry; connect validation errors through separate descriptive text.