Input OTP
Accessible one-time password component with copy paste functionality.
Installation
CLI
Manual
Examples
Separator
Use the <InputOTPSeparator /> component to add a separator between input groups.
input-otp-separator
Disabled
Use the disabled prop to disable the input.
input-otp-disabled
1
2
3
4
5
6
Controlled
Use the value and onChange props to control the input value.
input-otp-controlled
Enter your one-time password.
Invalid
Use aria-invalid on the slots to show an error state.
input-otp-invalid
0
0
0
0
0
0
Four Digits
A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.
input-otp-four-digits
Alphanumeric
Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.
input-otp-alphanumeric
Form
input-otp-form
Verify your login
Enter the verification code we sent to your email address: m@example.com.