Skip to content

CheckBox Group

Jump to bottom
Dan edited this page Jan 10, 2024 · 1 revision

CheckBox Group

Overview

The CheckBoxGroup component is a React component designed to render a group of checkboxes. It allows users to select multiple options from a set, making it ideal for forms or settings where multiple choices are available. The component supports custom styling and callback functions for state management.

Installation

To use the CheckBoxGroup component, you'll need to import it into your React project:

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

Usage

The CheckBoxGroup component is used to display a set of related checkboxes defined by the options prop. It manages the checked state of each checkbox and provides callback functionality to handle changes.

Props

The CheckBoxGroup component accepts the following props:

  • style: CSS styles to apply to the group.
  • onChecked: Callback function to be called when any checkbox is toggled. It receives the value of the toggled checkbox.
  • selected: An array of selected checkbox values used to initialize the group.
  • options: An array of objects representing each checkbox option. Each object should have a value and label.

Functionalities

  • State Management: Manages the checked state of each checkbox internally.
  • Custom Styling: Allows custom styling via the style prop.
  • Dynamic Rendering: Renders checkboxes based on the options prop.
  • Callback Function: Calls the onChecked function with the value of the checkbox when it is toggled.

Example

const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    // Add more options here
];

<CheckBoxGroup
    options={options}
    selected={['option1']}
    onChecked={(value) => console.log(value)}
/>

Styling

The component uses the following CSS classes:

  • form-check-group: The container for the group of checkboxes.
  • form-check: Applied to each checkbox within the group.
  • form-check-label: Applied to the label of each checkbox.

You can apply custom styles and classes to adjust the appearance as needed.

Contributing

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

Clone this wiki locally