OTPInput
The OTPInput component is designed for secure and user-friendly input of One-Time Passwords (OTPs). It features multiple input fields to capture each digit of the OTP individually, providing a clear and intuitive interface for users.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import OTPInput from '@start-base/react-form-elements/OTPInput';Usages
OTP Input With Label
OTP Input With Length
OTP Input With Format
--
OTP Input With Separator
/
OTP Input With Timer
-
02:00
OTP Input With On Complete
-
02:00
OTP Input With On Resend
02:00
OTP Input Disabled
OTP Input Error Message
Error Message
OTP Input Error
API
This component is a wrapper around input-otp (opens in a new tab) component. All props from input-otp API Reference (opens in a new tab) can be passed to this component.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| value | string | Value of the input | |
| length | object | Length of the code. | |
| timer | number | null | OTP code timer limit of seconds. |
| onComplete | function | Callback function that is fired when the all values entered. | |
| onResend | function | Callback function that is fired when the time out and cliced resend button. | |
| format | array | null | Inputs Separation array. |
| separator | string | "-" | Separator element between inputs |
| resendLabel | string | "Resend" | Resend button text. |