Form CheckBox

Form CheckBox

Overview

The FormCheckBox component is a React component designed to integrate a checkbox with a label in form-like structures. It encapsulates a checkbox and its corresponding label in a single, easy-to-use component. This component is ideal for forms and settings where a labeled checkbox is needed.

Installation

To use the FormCheckBox component in your React project, import it as follows:

const { FormCheckBox } = window.$_gooee.framework;

Usage

The FormCheckBox component is used to display a checkbox alongside a label. It is particularly useful in forms where you need to present checkboxes with clear, associated labels.

Props

The FormCheckBox component accepts the following props:

• className: Additional CSS class names to apply to the component container.
• label: The text label displayed next to the checkbox.
• checkClassName: Additional CSS class names to apply to the checkbox.
• style: CSS styles to apply to the component container.
• checked: Boolean indicating whether the checkbox is checked.
• onToggle: Function to be called when the checkbox is toggled. It receives the new checked state as an argument.

Functionalities

• Checkbox Integration: Includes a CheckBox component for user interaction.
• Custom Styling: Can be styled via CSS classes and inline styles.
• Label Association: Displays a label next to the checkbox for clarity and usability.

Styling

The component uses the following CSS classes:

• form-check: The base class for the component container.
• Additional classes can be applied to the checkbox and the label via checkClassName and form-check-label, respectively.

Custom styles can also be applied using the style prop.

Example

Basic FormCheckBox Usage

<FormCheckBox
    label="Accept Terms"
    checked={true}
    onToggle={(newChecked) => console.log(newChecked)}
/>

Custom Styled FormCheckBox

<FormCheckBox
    className="custom-container-class"
    checkClassName="custom-checkbox-class"
    style={{ color: 'blue' }}
    label="Subscribe to Newsletter"
    checked={false}
    onToggle={(newChecked) => console.log(newChecked)}
/>

Contributing

Contributions to enhance the FormCheckBox component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.