> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/form-controls/checkbox-group/code.md).

# Code

## Props

<table><thead><tr><th width="150">Props</th><th>Data Type</th><th>Required</th></tr></thead><tbody><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>label</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>info</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>children</td><td>-HTML tags<br>-Custom Components<br><em>(Checkbox and CheckboxSubGroup)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>helptext</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>error</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>errorMessage</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onChange</td><td>function event</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

{% hint style="info" %}
The properties marked with a **?** are optionals.
{% endhint %}

### 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](#undefined) chapter to know more about the props it receives.

#### CheckboxSubGroup

| Props    | Data Type                                           | Required             |
| -------- | --------------------------------------------------- | -------------------- |
| children | <p>HTML Tags<br>Custom Components<br>(Checkbox)</p> | :white\_check\_mark: |
| label    | string                                              | :x:                  |

{% hint style="info" %}
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.
{% endhint %}

### Event Response

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

### onChange

```jsx
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>
    )
}
```

![](/files/jnifBi0AbqbHvuUuQQLp)

## Components Dependency

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

* [Checkbox](/sds/sds-components/form-controls/checkbox.md)
* [Label](/sds/sds-components/form-controls/label.md)

## Live Demo

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

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fform-controls-checkbox-group--basic-checkbox-group>" %}