Input
Installation
npx gbs-add-block@latest -a Input
The Input
component is a versatile input field designed for both general text input and OTP (One-Time Password) entry. It supports error handling, password visibility toggling, and customizable styles through Tailwind CSS. This documentation outlines the component's props, usage, and key functionalities.
Props Table
OTPField
Boolean
false
If true, renders the component as an OTP input field.
OTPValue
String
""
The current value of the OTP input fields.
OTPLength
Number
4
The number of OTP input fields to render.
OTPClass
String
"w-8 h-10 m-1 border border-gray-600 rounded-lg text-center"
CSS classes for the OTP input fields.
onOTPValueChange
Function
undefined
Callback function executed when the OTP value changes.
error
String
undefined
Error message to display below the input field when validation fails.
...props
InputProps
{}
Other props passed to the input element (e.g., type
, placeholder
).
Usage Guide
To use the Input
component, you can import it into your React application and provide the necessary props. Below is an example usage of the Input
component:
import React, { useState } from 'react';
import { Input } from './path/to/Input';
const ExampleComponent = () => {
const [otp, setOtp] = useState("");
const handleOTPChange = (value) => {
setOtp(value);
};
return (
<div>
<h1>Enter OTP</h1>
<Input
OTPField={true}
OTPValue={otp}
onOTPValueChange={handleOTPChange}
OTPLength={6}
error={otp.length < 6 ? "Please enter a 6-digit OTP" : undefined}
/>
</div>
);
};
export default ExampleComponent;
Key Functionalities
OTP Input: Automatically handles focus transitions between OTP input fields, allowing for a seamless user experience.
Password Visibility Toggle: If the input type is set to "password", users can toggle visibility by clicking the eye icon.
Error Handling: Displays an error message below the input field when validation fails, such as incomplete OTP entry.
Notes
Ensure the
onOTPValueChange
prop is provided to capture changes in OTP input values.The
OTPClass
prop allows customization of the OTP input fields' styles.For password inputs, the component will render a toggle button for visibility.
Last updated