OTP Input

An OTP (One-Time Password) Input Component is a user interface element designed to enhance the security and user experience during authentication processes. It is commonly used in various applications, such as banking, e-commerce, and other online services, to verify a user's identity

Import

To utilize the OTP input component, import it from @vivakits/react-components.

import { VKOtpInput } from "@vivakits/react-components";

Basic Usage

The VKOtpInput component is used to get the OTP from the user.

Size

The size prop defines the size of the input fields, affecting their height, width, and text size. This prop allows customization to fit different design requirements, ranging from small xs to extra-large 2xl input fields. The available sizes are xs sm md lg xl and 2xl. The default size is md.

Rounded

The rounded prop controls the border-radius of the input fields, allowing for different levels of rounded corners. Options range from none (no rounded corners) to full (completely rounded corners), with several intermediate options like xs sm md lg and xl for finer control.

Error

The OTP Input component can display an error state using the hasError prop. The error message can be customized using the errorMessage prop.

Submit

The onSubmit prop is a callback function that is triggered when the user submits the OTP input. The function receives the concatenated value of all input fields as a single string or number, allowing the parent component to handle the OTP verification or other actions upon submission. The example below includes a enter button for this purpose.

Custom Submit Button

The renderSubmitButton prop allows a custom render function for the submit button. This function receives the current OTP value and a callback function for handling the submission. It returns a React node, allowing the parent component to provide a customized submit button. The example below shows the OTP Input with a custom submit button.

Custom Reset Button

The renderResetButton prop allows a custom render function for the reset button. This function receives a callback function that resets the OTP input fields when invoked. It returns a React node, allowing the parent component to provide a customized reset button, such as one with specific styling or additional functionality. The example below shows the OTP Input with a custom reset button.

Input Length

The inputLength prop specifies the total number of input fields required for the OTP. For instance, if inputLength is set to 6, six separate input fields will be displayed, allowing the user to enter a six-digit OTP.

Group Size

The groupSize prop specifies how many input fields should be grouped together before a separator is inserted. For example, if groupSize is 3 and inputLength is 6, the OTP input will be grouped into two sets of three input fields, with a separator between the two groups. By default, the group size is the same as the inputLength of the OTP Input. In the example below, the OTP Input is shown with a group size of 2.

Separator

The separator prop defines the separator to be displayed between groups of input fields. This can be a simple string (e.g., a hyphen -) or a React node for more complex separators, such as icons or styled dividers. The example below demonstrates an OTP Input with a separator of ..

Masked Icon

The maskedIcon prop defines the character used to mask the input when isMasked is true. For example, if maskedIcon is *, each character typed by the user will be displayed as an asterisk (*). This is useful for hiding sensitive information such as passwords or OTPs. The default masked icon is *.

Allow Charcter

TheallowChar prop determines whether the input fields should accept alphabetic characters in addition to numeric digits. If true, users can input both letters and numbers. If false, only numeric input is allowed, ensuring that the OTP consists of digits only. By default the value is set to false.

Required

The required prop marks the OTP input fields as required for form submission. If true, the form cannot be submitted until all OTP fields are filled, ensuring that the user provides a complete OTP. By default the behavious is set to false.

Custom Class

Additional custom class names to apply to the input fields by className prop and to the wrapper element of the entire component by wrapperClass for styling purposes. This allows for further customization of the input fields and the outer container of the OTP input component beyond the predefined styles.

Customizations

Below is the example of OTP input component in used without border just by manipulating the classnames.

API Reference