Input OTP
Accessible one-time password component with copy paste functionality.
Accessible one-time password component with copy paste functionality.
<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>You can use slotSize prop on InputOTP component to change the size of the input OTP slots. The default size is md.
You can use variant prop on InputOTP component to change the variant of the input OTP. The default variant is bordered.
You can use InputOTPSeparator component to add a separator between the input OTP slots.
You can use pattern prop on InputOTP component to restrict the input to a specific pattern. It accepts a regular expression string.
Only lowercase letters (a-z):
Only uppercase letters (A-Z):
Numbers only (0-9):
Letters only (a-z, A-Z):
Value: