[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)

# CheckboxGroup

Import: `import { CheckboxGroup } from '@neo4j-ndl/react'`

## Props

### CheckboxGroup

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
| `hasRequiredIndicator` | `boolean` |  |  | Whether Required or Optional is shown at the end of the legend row |
| `hasVisuallyHiddenLabel` | `boolean` |  |  | Whether the legend is clipped out of the layout, leaving it to screen readers only |
| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
| `name` | `string` |  |  | Shared native name for checkbox form values |
| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |

Checked state remains on each `Checkbox`. Browsers cannot natively validate
an “at least one” checkbox requirement, so applications should set
`errorText` after validating a required group.

## Accessibility

`CheckboxGroup` renders a native `<fieldset>` and `<legend>`. The legend names
the group, while every `Checkbox` keeps its own label. A shared `name` can be
provided when checked values should be submitted under the same form key.

Each native checkbox remains a separate Tab stop and Space toggles the focused
checkbox. `isDisabled` disables the fieldset and every descendant control.

Browsers cannot express an “at least one checkbox” constraint with native
`required`; applying `required` to every checkbox would require every option.
Use `isRequired` for the group’s required presentation, validate the selected
values in the application, and provide `errorText` when validation fails.
“Required” is included in the legend's accessible name.

Help and error text are associated with the group through `aria-describedby`;
individual checkboxes retain only descriptions supplied directly to them. An
error replaces help text and sets `aria-invalid` on the group and its
checkboxes.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <CheckboxGroup
      label="Notification channels"
      name="notification-channel"
      helpText="Choose every channel you want to use."
    >
      <Checkbox label="Email" value="email" isDefaultChecked />
      <Checkbox label="In-app" value="in-app" />
      <Checkbox label="Mobile push" value="push" />
    </CheckboxGroup>
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <CheckboxGroup
      label="Notification channels"
      name="notification-channel-disabled"
      isDisabled
    >
      <Checkbox label="Email" value="email" isDefaultChecked />
      <Checkbox label="In-app" value="in-app" />
      <Checkbox label="Mobile push" value="push" />
    </CheckboxGroup>
  );
};

export default Component;
```

### Error

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <CheckboxGroup
      label="Notification channels"
      name="notification-channel-error"
      errorText="Select at least one notification channel."
    >
      <Checkbox label="Email" value="email" isDefaultChecked />
      <Checkbox label="In-app" value="in-app" />
      <Checkbox label="Mobile push" value="push" />
    </CheckboxGroup>
  );
};

export default Component;
```

### Optional

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <CheckboxGroup
      label="Notification channels"
      name="notification-channel-optional"
      hasRequiredIndicator
    >
      <Checkbox label="Email" value="email" isDefaultChecked />
      <Checkbox label="In-app" value="in-app" />
      <Checkbox label="Mobile push" value="push" />
    </CheckboxGroup>
  );
};

export default Component;
```

### Required

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <CheckboxGroup
      label="Notification channels"
      name="notification-channel-required"
      hasRequiredIndicator
      isRequired
    >
      <Checkbox label="Email" value="email" isDefaultChecked />
      <Checkbox label="In-app" value="in-app" />
      <Checkbox label="Mobile push" value="push" />
    </CheckboxGroup>
  );
};

export default Component;
```

### Visually Hidden Label

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <>
      <CheckboxGroup
        label="Notification channels"
        name="notification-channel-hidden"
        hasVisuallyHiddenLabel
      >
        <Checkbox label="Email" value="email" isDefaultChecked />
        <Checkbox label="In-app" value="in-app" />
        <Checkbox label="Mobile push" value="push" />
      </CheckboxGroup>
    </>
  );
};

export default Component;
```