Checkbox Component

A simple React checkbox component.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-checkbox

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-checkbox

Props

The Checkbox component accepts the following properties:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------------------------------------------------------| | id | string | The ID attribute for the checkbox element. | | label | string | The label text for the checkbox. | | disabled | boolean | Disables the checkbox when set to true. | | errorMessage | string | An optional error message to be displayed. | | ref | object | A reference object for the checkbox element. | | checked | boolean | Determines whether the checkbox is checked or not. | | onChange | function | Callback function to handle the checkbox change event. | | onBlur | function | Callback function to handle the checkbox blur event. | | onFocus | function | Callback function to handle the checkbox focus event. |

Usage

import React, {useState} from 'react';
import {Checkbox} from '@bolttech/atoms-checkbox';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Checkbox
        id="custom-checkbox"
        label="Check me"
        disabled={false}
        errorMessage="This field is required"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.