Home

Previous: Input Group Next: Item

The InputOTP component is designed for entering one-time passwords (OTP) in a secure and user-friendly way. It splits the input into multiple fields for better usability and validation.

Installation

npm
npx phpxui add InputOTP

Usage 

use Lib\PHPXUI\{
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
}
<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>

Examples

Pattern

Separator

Controlled

{otp === '' ? 'Enter your one-time password.' : 'You entered: ' + otp}

Form

Please enter the one-time password sent to your phone.