Checkbox

Installation

npx gbs-add-block@latest -a Checkbox

The Checkbox component provides a customizable checkbox input, allowing users to select options in your UI. It comes with default styling that can be easily overridden.

Props Table

Prop Name	Type	Default Value	Description
...props	InputHTMLAttributes	-	Any additional props that can be passed to the checkbox element, such as onChange, checked, disabled, etc.

Usage Example

Here’s an example of how to use the Checkbox component in your project:

import { Checkbox } from 'your-library';

const App = () => {
  const handleCheckboxChange = (event) => {
    console.log("Checkbox checked:", event.target.checked);
  };

  return (
    <div>
      <label>
        <Checkbox onChange={handleCheckboxChange} />
        Accept Terms and Conditions
      </label>
    </div>
  );
};

export default App;

Customization

You can customize the checkbox's appearance by overriding the default styles. For instance, you can add additional Tailwind CSS classes directly to the component:

<Checkbox className="w-6 h-6 text-blue-500" />