Checkbox Component

A React checkbox input component with label and error message support.

Installation

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

npm install @bolttech/ob-atoms-checkbox

or

yarn add @bolttech/ob-atoms-checkbox

Props

The Checkbox component accepts the following properties:

| Prop | Type | Description | | ------------ | ---------------------------------- | ----------------------------------------------------- | | id | string | Required. Unique identifier for the checkbox input. | | label | string | Required. Text displayed next to the checkbox. | | children | ReactNode | Optional content rendered alongside the label. | | disabled | boolean | Disables the checkbox when true. | | errorMessage | string | Error message displayed below the checkbox. | | checked | boolean | Controls the checked state of the checkbox. | | onChange | ChangeEventHandler<HTMLInputElement> | Callback fired when the checked state changes. | | onBlur | ChangeEventHandler<HTMLInputElement> | Callback fired when the checkbox loses focus. | | onFocus | ChangeEventHandler<HTMLInputElement> | Callback fired when the checkbox gains focus. |

Usage

import React, { useState } from 'react';
import { Checkbox } from '@bolttech/ob-atoms-checkbox';

const ExampleComponent = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      id="accept-terms"
      label="I accept the terms and conditions"
      checked={checked}
      onChange={(event) => setChecked(event.target.checked)}
    />
  );
};

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.