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:

Live Demo

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

React

Last updated