@bolttech/atoms-checkbox NPM

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

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;