BrutalLab UI
en
EnglishEspañol
PrimitiveAvailable

Input OTP

A single accessible input rendered as grouped verification-code slots.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/input-otp.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

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

export default function Demo() {
  return (
    <div className="grid gap-3">
      <Label htmlFor="verification-code">Verification code</Label>
      <InputOTP
        id="verification-code"
        maxLength={6}
        inputMode="numeric"
        pattern="^[0-9]+$"
        autoComplete="one-time-code"
      >
        <InputOTPGroup>
          {[0, 1, 2].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          {[3, 4, 5].map((index) => (
            <InputOTPSlot key={index} index={index} />
          ))}
        </InputOTPGroup>
      </InputOTP>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
  • Hover never validates a field. The application decides when to show errors.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
maxLengthnumber—Required number of characters.
patternstring—Allowed input characters.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep the real input labelled. Match slot count to maxLength and permit paste/autofill.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.