A
Aether UI

Input OTP

An accessible one-time password input with individual digit slots. Supports copy-paste auto-fill, custom separators between groups, and full keyboard navigation.

  • ✓Individual digit slots with active cursor
  • ✓Supports custom separators between groups
  • ✓Copy-paste fills all slots automatically
  • ✓Built on the input-otp library

import { Input OTP }from "@aetherstack/ui"

input otp.tsx
"use client"

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

export function InputOTPDemo() {
  return (
    <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>
  )
}

Usage

4-digit PIN

Use a single group for a compact 4-digit PIN field.

6-digit with separator

Split slots into two groups separated by a dash.

Props

PropTypeDefaultDescription
maxLengthnumber—Total number of OTP characters. Required.
valuestring—Controlled value of the OTP input.
onChange(value: string) => void—Callback fired on every character entry or paste.
disabledbooleanfalseDisables all slots.
...propsReact.HTMLAttributes<HTMLDivElement>—Additional props passed to the root OTPInput element.

* Required props

Accessibility

  • →The root input-otp element manages focus within a single hidden input — screen readers announce digit entry naturally.
  • →Pair with a visible or visually-hidden label that describes the purpose of the code (e.g. 'Enter verification code').
  • →On paste, all slots are filled automatically — no additional keyboard interaction is required.