# 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 | ❌ |
{% 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 | HTML Tags
Custom Components
(Checkbox)
| :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(
{}}
>
)
}
```
## 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="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://2600hz.gitbook.io/sds/sds-components/form-controls/checkbox-group/code.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.