Input OTP

Import

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@timelycare/helix-ui"

Props

interface InputOTPProps {
  maxLength: number
  value?: string
  onChange?: (value: string) => void
  disabled?: boolean
  pattern?: string // REGEXP_ONLY_DIGITS
  className?: string
}

interface InputOTPSlotProps {
  index: number
  className?: string
}

Variants

Choosing a Variant

• digits-only — Standard verification codes (6 digits, no breaks)
• with-separator — Grouped as XX-XX-XX with dashes
• simple — Two groups XXX-XXX format
• with-spacing — 4-digit PINs with visual spacing

Label Option

Slot States

Slot Size: 36×36px

Common Patterns

Digits Only

<InputOTP maxLength={6}>
  <InputOTPGroup>
    {[0,1,2,3,4,5].map(i => <InputOTPSlot key={i} index={i} />)}
  </InputOTPGroup>
</InputOTP>

With Separator (XX-XX-XX)

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

Simple (XXX-XXX)

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

With Label

<div className="space-y-2">
  <Label>Label</Label>
  <InputOTP maxLength={6}>
    <InputOTPGroup>
      {[0,1,2,3,4,5].map(i => <InputOTPSlot key={i} index={i} />)}
    </InputOTPGroup>
  </InputOTP>
</div>

Accessibility

• Built on input-otp library
• Keyboard: digits auto-advance to next slot, Backspace to go back
• Screen reader: slots announced with position context
• Requires label association for form context
• Tab moves between slot groups when using separators

Gotchas

See Also

• Related Components: Input (standard text input), Form (form integration)
• Accessibility: Forms Accessibility — Input ARIA patterns

Last updated: February 9, 2026