InputOTP
Input for authentication or verification where the user can only enter one symbol at time.
Verification
We have sent a code to j***@mail.com. Enter the code below.
Import
JSX
Usage
JSX
Variants
Label
Enter PIN
JSX
Description
Verification
We have sent a code to +31 ******27. Enter the code below.
JSX
Separator
JSX
Auto Submit
If autoSubmit is true, then the onSubmit callback will be automatically called when
every slot has been filled in. If autoSubmit is false, the user has to manually press
'Enter' to submit the code.
Verification
We have sent a code to j***@mail.com. Enter the code below.
JSX
Disabled
Enter PIN
JSX
Validation
Letters only
Verification
We have sent a code to +31 ******27. Enter the code below.
JSX
Numbers only
Verification
We have sent a code to +31 ******27. Enter the code below.
JSX
Combination
Verification
We have sent a code to +31 ******27. Enter the code below.
JSX
On Error
It is possible to pass custom errors to InputOTP like network errors, API-errors etc.
The key value is mandatory and must be different for each time an error occurs in order
to trigger a re-render which will display the error again. The message value can be the same.
Verification
We have sent a code to j***@mail.com. Enter the code below.
JSX
Props
InputOTP.Form
| Prop | Type | Default | Description |
|---|---|---|---|
inputLength* | number | - | Amount of slots |
errorMessage | {message: string, key: string} | - | Custom error message |
onSubmit | (string) => Promise<void> | void | - | Callback function that fires on completion |
autoSubmit | boolean | true | Automatically calls onSubmit on completion |
disabled | boolean | false | Prohibits user from filling in the input |
allowNumbers | boolean | true | Allow input value to contain numbers |
allowLetters | boolean | true | Allow input value to contain letters |
children* | ReactNode | - | Expecting <InputOTP.Slot> and in if applicable also <InputOTP.Separator> |
InputOTP.Slot
| Prop | Type | Default | Description |
|---|---|---|---|
index* | number | - | Which slot in the sequence |
InputOTP.Label
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | Label text |
InputOTP.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | Description text |