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

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.