Input OTP

Use grouped slots to make short verification codes easy to scan and enter.

0/6 digits entered

Show codeCopy

Import

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

Composition

InputOTP provides the input context. Group slots with InputOTPGroup, separate groups with InputOTPSeparator, and render each position with InputOTPSlot. InputOTPGroup size="lg" draws 48px slots for a code that is the main task of the page, such as sign-in verification. containerClassName styles the outer container while className styles the hidden input.

Controlled values

Pass value and onChange when the code is owned by form state. Set maxLength to the exact code length and use the completion state to enable verification or show status text.

Accessibility

Give the input an accessible label and set maxLength to the expected code length.

Use aria-invalid="true" when the entered code is rejected. The slots expose the active position and invalid state so the focus and error rings remain visible. Keep the input enabled while users are correcting a code; use disabled only when verification is unavailable.

Best practices

• Accept paste and keyboard input through the underlying input.
• Announce completion or errors in nearby text with aria-live when the state changes.
• Keep the separator decorative; the code remains one logical input.