Checkbox Component

A customizable React checkbox component.

Installation

Use the package manager npm

npm install @tevui/checkbox

Props

The Checkbox component accepts the following properties:

| Prop | Type | Description | | -------------- | --------------- | ----------------------------------- | | dataTestId | string | Default - tevui-checkbox-datatestid | | disabled | boolean | | | required | boolean | | | label | string | Button label. | | labelSize | number | | | baseColor | string | RGB or hexadecimal | | baseColorError | string | RGB or hexadecimal | | id | string | The HTML id attribute | | ariaLabel | string | aria-label to the button | | onClick | function | | | onChange | function | | | onBlur | function | | | tip | InputTextProp | | | error | InputTextProp | RGB or hexadecimal |

Usage

import React from "react";
import { Checkbox } from "@tevui/checkbox";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    // Logic to handle the button click event
  };
  return (
    <Checkbox
      dataTestId="tevui-checkbox-datatestid"
      disabled={false}
      disabled={true}
      label="Checkbox text"
      labelSize={14}
      baseColor="#545454"
      baseColorError="#e73333"
      id="tevui-input-id"
      onClick={console.log}
      onChange={console.log}
      onBlur={console.log}
      tip={
        size: 10,
        text: "Checkbox text tip",
      }
      error={
        size: 10,
        text: "Error message here",
      }
    />
  );
};

export default ExampleComponent;