Checkbox Component

A simple React checkbox component.

Installation

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

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

or

`bash 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`

`jsx 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 ( id="custom-checkbox" label="Check me" disabled={false} errorMessage="This field is required" checked={isChecked} onChange={handleCheckboxChange} /> ); };

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.

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

jsx
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 (
    
              id="custom-checkbox"
        label="Check me"
        disabled={false}
        errorMessage="This field is required"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
    
  );
};

export default ExampleComponent;