A simple React checkbox component.
npm install @bolttech/atoms-checkboxA simple React checkbox component.
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
The Checkbox component accepts the following properties:
| Prop | Type | Description |
|--------------|---------------|---------------------------------------------------------------------------------------------------|
| id | string | The ID attribute for the checkbox element. |string
| label | | The label text for the checkbox. |boolean
| disabled | | Disables the checkbox when set to true. |string
| errorMessage | | An optional error message to be displayed. |object
| ref | | A reference object for the checkbox element. |boolean
| checked | | Determines whether the checkbox is checked or not. |function
| onChange | | Callback function to handle the checkbox change event. |function
| onBlur | | Callback function to handle the checkbox blur event. |function
| onFocus | | Callback function to handle the checkbox focus event. |
`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 (
label="Check me"
disabled={false}
errorMessage="This field is required"
checked={isChecked}
onChange={handleCheckboxChange}
/>
);
};
export default ExampleComponent;
``
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.