## Import
```jsx
import { CheckboxGroup, Checkbox } from "@cfa/react-core";
```
## Live Editor
```jsx
Option 1
Option 2
Option 3
```
## Examples
### Disabled
The `isDisabled` prop applies the following visual style and prevents the user from making a selection.
```jsx
Option A
Option B
Option C
```
### Description
The `description` prop provides additional context to the user about the checkbox group or individual checkboxes. You may pass the `description` prop to the `CheckboxGroup` or `Checkbox` component.
```jsx
Option 1
Option 2
Option 3
Option A
Option B
Option C
```
### Readonly
The `isReadOnly` prop applies the following visual style and prevents the user from making a selection.
```jsx
Option 1
Option 2
Option 3
Option 4
```
### Required
The `isRequired` prop adds a red asterisk to the checkbox group label.
```jsx
Option A
Option B
Option C
```
### Success
The `isSuccess` prop should be used conditionally on the individual Checkbox, not all checkboxes in a group.
```jsx
Option A
Success
Option C
```
### Controlled
Use the `value` or `defaultValue` prop to set the selected items, and `onChange` to handle selection changes.
```jsx
function ControlledExample() {
let [selected, setSelected] = React.useState(["soccer", "baseball"]);
return (
<>
Soccer
Baseball
Basketball
Selected: {selected.join(", ")}
);
}
```
### Validation
For validation, pass the `isRequired` prop and add a custom `errorMessage`.
Click submit with no selection made to get `errorMessage`.
```jsx
function ExampleValidation() {
const [selectedValues, setSelectedValues] = React.useState([]);
const handleSubmit = () => {
if (selectedValues.length > 0) {
alert("Form submitted");
}
};
return (
);
}
```
## Props
### CheckboxGroup
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode` | - | The children checkboxes of the checkbox group. |
| description | `string` | - | The helper text for the checkbox group. |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | Error message displays when the checkbox group is invalid. |
| label | `string` | - | The label of the checkbox group. |
| ref | `Ref` | - | Requires React 19 |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| className | `ClassNameOrFunction` | `'react-aria-CheckboxGroup'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultValue | `string[]` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| form | `string` | - | The \`\