InputOTP

Usage

import { InputOTP } from '@heroui/react';

Anatomy

import { InputOTP } from '@heroui/react';

export default () => (
  <InputOTP maxLength={6}>
    <InputOTP.Group>
      <InputOTP.Slot index={0} />
      <InputOTP.Slot index={1} />
      {/* ...rest of the slots */}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      <InputOTP.Slot index={3} />
      {/* ...rest of the slots */}
    </InputOTP.Group>
  </InputOTP>
)

InputOTP is built on top of input-otp by @guilherme_rodz, providing a flexible and accessible foundation for OTP input components.

Examples

Variants

The InputOTP component supports two visual variants:

• primary (default) - Standard styling with shadow, suitable for most use cases
• secondary - Lower emphasis variant without shadow, suitable for use in Surface components

In Surface

When used inside a Surface component, use variant="secondary" to apply the lower emphasis variant suitable for surface backgrounds.

Disabled State

Four Digits

Controlled

Control the value to synchronize with state, clear the input, or implement custom validation.

On Complete

Use the onComplete callback to trigger actions when all slots are filled.

Form Example

A complete two-factor authentication form with validation and submission.

With Pattern

Use the pattern prop to restrict input to specific characters. HeroUI exports common patterns like REGEXP_ONLY_CHARS and REGEXP_ONLY_DIGITS.

With Validation

Use isInvalid together with validation messages to surface errors.

Customization

Tailwind CSS

Global CSS

To customize the InputOTP component classes, you can use the @layer components directive. Learn more.

@layer components {
  .input-otp {
    @apply gap-3;
  }

  .input-otp__slot {
    @apply size-12 rounded-xl border-2 font-bold;
  }

  .input-otp__slot[data-active="true"] {
    @apply border-accent-500 ring-2 ring-accent-200;
  }

  .input-otp__separator {
    @apply w-2 h-1 bg-border-strong rounded-full;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The InputOTP component uses these CSS classes (View source styles):

Base Classes

• .input-otp - Base container
• .input-otp__container - Inner container from input-otp library
• .input-otp__group - Group of slots
• .input-otp__slot - Individual input slot
• .input-otp__slot-value - The character inside a slot
• .input-otp__caret - Blinking caret indicator
• .input-otp__separator - Visual separator between groups

State Classes

• .input-otp__slot[data-active="true"] - Currently active slot
• .input-otp__slot[data-filled="true"] - Slot with a character
• .input-otp__slot[data-disabled="true"] - Disabled slot
• .input-otp__slot[data-invalid="true"] - Invalid slot
• .input-otp__container[data-disabled="true"] - Disabled container

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] on slot
• Active: [data-active="true"] on slot (currently focused)
• Filled: [data-filled="true"] on slot (contains a character)
• Disabled: [data-disabled="true"] on container and slots
• Invalid: [data-invalid="true"] on slots

API Reference

InputOTP

InputOTP is built on top of the input-otp library with additional features.

Base Props

Validation Props

Input Props

Form Props

InputOTP.Group

InputOTP.Slot

InputOTP.Separator

Exported Patterns

HeroUI re-exports common regex patterns from input-otp for convenience:

import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from '@heroui/react';

// Use with pattern prop
<InputOTP pattern={REGEXP_ONLY_DIGITS} maxLength={6}>
  {/* ... */}
</InputOTP>

• REGEXP_ONLY_DIGITS - Only numeric characters (0-9)
• REGEXP_ONLY_CHARS - Only alphabetic characters (a-z, A-Z)
• REGEXP_ONLY_DIGITS_AND_CHARS - Alphanumeric characters (0-9, a-z, A-Z)

Related Components