Code

Props

Props	Data Type	Required
className	string	❌
label	string	✅
info	string	❌
children	-HTML tags -Custom Components (Checkbox and CheckboxSubGroup)	✅
helptext	string	❌
disabled	boolean	❌
error	boolean	❌
errorMessage	string	❌
onChange	function event	❌

The properties marked with a ? are optionals.

Children

To generate the structure required for the checkboxGroup, the developer is able to insert the following components as children elements:

Checkbox

Consult the Checkbox chapter to know more about the props it receives.

CheckboxSubGroup

Props	Data Type	Required
children	HTML Tags Custom Components (Checkbox)	✅
label	string	❌

At using Checkbox or CheckboxSubGroup inside a CheckboxGroup component, they are going to receive the error, disabled and onChange events by default and the developer should not include them in the code.

Event Response

This component is not sending any response, instead, it is just facilitating the individual Checkbox components events.

onChange

import React, {useState} from 'react';
import {
    ChekboxGroup, 
    Checkbox, 
    CheckboxSubGroup
} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [checkboxList, setCheckboxList] = useState({
        example1: false,
        example2: false,
        
        //SubGroupElements
        example1a: true,
        example2a: false,
        example3a: false,
        
        example3: false
    });
    
    const updateState = (e)=>{
        setCheckboxList(prevState => ({
            ...prevState,
            [e.id]: e.checked
        }));
    }
    
    return(
        <CheckboxGroup
          className="checkboxGroupExample"
          errorMessage="Optional error message can offer better guidance."
          helptext="Optional help text can offer additional guidance."
          info="Optional Info Message"
          label="Checkgroup label text"
          onChange={() => {}}
        >
          <Checkbox
            id="example1"
            label="Example 1"
            value="example1"
            checked={checkboxList.example1}
          />
          <Checkbox
            id="example2"
            label="Example 2"
            value="example2"
            checked={checkboxList.example2}
          />
          <CheckboxSubGroup subGroupName="Sub Group">
            <Checkbox
              checked={checkboxList.example1a}
              id="example1a"
              label="Example 1a"
              value="example1a"
            />
            <Checkbox
              checked={checkboxList.example2a}
              id="example2a"
              label="Example 2a"
              value="example2a"
            />
            <Checkbox
              checked={checkboxList.example3}
              id="example3a"
              label="Example 3a"
              value="example3a"
            />
          </CheckboxSubGroup>
          <Checkbox
            checked={checkboxList.example3}
            id="example3"
            label="Example 3"
            value="example3"
          />
        </CheckboxGroup>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Checkbox

• Label

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Checkbox Group - Basic Checkbox Group ⋅ Storybooksipster-react-component-storybook.netlify.app