Input Component

A customizable React input component.

Installation

Use the package manager npm

npm install @tevui/input

Props

The Input component accepts the following properties:

| Prop | Type | Description | | ------------ | --------------- | -------------------------------------- | | dataTestId | string | Default - tevui-input-datatestid | | disabled | boolean | | | required | boolean | | | label | string | Button label. | | inputSize | number | | | baseColor | string | RGB or hexadecimal | | borderRadius | number | will convert in PX | | type | string | text, number, email, phone | | tip | InputTextProp | | | error | InputTextProp | RGB or hexadecimal | | id | string | The HTML id attribute for the button | | type | string | "button", "submit" | | fullWidth | boolean | defgault false | | ariaLabel | string | aria-label to the button | | requiredText | string | | | emailText | string | | | onClick | function | | | onChange | function | | | onBlur | function | |

Usage

import React from "react";
import { Input } from "@tevui/input";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    // Logic to handle the button click event
  };

  return (
    <Input
      dataTestId="tevui-input-datatestid"
      disabled={false}
      disabled={true}
      label="Input text"
      type="text"
      baseColor="#545454"
      inputSize={14}
      labelColor="#ffffff"
      borderRadius={10}
      id="tevui-input-id"
      onClick={console.log}
      onChange={console.log}
      onBlur={console.log}
      tip={
        color: "#383838",
        size: 10,
        text: "Input text tip",
      }
      error={
        size: 10,
        text: "Error message here",
      }
      requiredText="this input is required"
      emailText="Invalid e-mail"

    />
  );
};

export default ExampleComponent;