InputOTP

One-time password / verification code input with individual character slots.

When to use

• Email verification — 6-digit codes sent via email.
• SMS OTP — phone number verification.
• Two-factor authentication — TOTP codes.
• PIN entry — 4-digit PINs.

Import

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from '@mihcm/ui/InputOTP';

Basic usage

const [value, setValue] = useState('');
 
<InputOTP maxLength={6} value={value} onChange={setValue}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

Four-digit PIN

<InputOTP maxLength={4} value={value} onChange={setValue}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>

When NOT to use

• Long text input — use Input or Textarea.
• Auto-filled codes that arrive via SMS autofill — the component supports autocomplete="one-time-code", but test on target devices.

Composition

• Use InputOTPSeparator between groups to visually split codes (e.g. 3-3 for 6-digit codes).
• maxLength controls the total number of slots. Match it to the sum of slots across all groups.
• pattern prop accepts a regex to restrict input (e.g. REGEXP_ONLY_DIGITS for numeric codes).
• Auto-submits when all slots are filled — wire onComplete to trigger verification.

Related

• Input — standard text input.
• Form — form field integration.