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.