Toggle Component

A customizable React toggle component.

Estilos

O CSS está incluído no JavaScript do pacote e é adicionado automaticamente à página no navegador. Basta importar o componente, sem importar CSS separado. Ao atualizar, remova imports manuais de CSS deste pacote.

Em aplicações com SSR, os estilos são adicionados quando o JavaScript executa no navegador; não são incluídos automaticamente no HTML gerado pelo servidor.

Installation

Use the package manager npm

npm install @tevui/toggle

Props

The Toggle component accepts the following properties:

| Prop | Type | Description | | -------------- | --------------- | --------------------------------- | | dataTestId | string | Default - tevui-toggle-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 { Toggle } from "@tevui/toggle";

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

export default ExampleComponent;