@bolttech/atoms-checkbox

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.