STRATA

Components / Input OTP

Input OTP

Entering a verification code sent by email or SMS: one slot per character, with paste and autofill support (the input-otp library).

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@layers/ui/input-otp'

Rendered stock

House rules

  • The house composition is six digits in two InputOTPGroups of three, divided by an InputOTPSeparator; slots are indexed 0 through 5.
  • Numeric codes get pattern="^[0-9]+$" and autoComplete="one-time-code" so mobile keyboards and autofill behave.
  • Controlled via value/onChange; gate the confirm button on value.length reaching maxLength.