Design System/Atoms/Input OTP

Input OTP

One-time password input with individual character slots — used for verification codes, PINs, and two-factor authentication.

When To Use

  • Use Input OTP when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Key exports

InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator

Example Code

import { useState } from "react"
import {
  InputOTP, InputOTPGroup, InputOTPSlot,
} from "@hilum/ui"

const [value, setValue] = useState("")

<div className="flex flex-col items-center gap-3">
  <InputOTP maxLength={6} value={value} onChange={setValue}>
    <InputOTPGroup>
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <InputOTPSlot key={i} index={i} />
      ))}
    </InputOTPGroup>
  </InputOTP>
  <p className="caption text-ground-400">
    {value ? \

Variants

6-digit code

Standard verification code input with live value display

Enter your 6-digit code

With separator

Two groups of 3 separated by a dash — common for confirmation codes

4-digit PIN

Slightly larger slots for numeric PIN entry

Enter your PIN

Completed state

All slots filled — shows a success treatment with a verified badge

1
2
3
4
5
6

Code verified successfully