---
title: CheckboxGroup
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/CheckboxGroup
---

A group of `<Checkbox>` buttons. The `<Checkbox>` buttons may either be direct children or descendants of the checkbox group.

**Note**: Setting `value` will override `defaultValue` as it puts the group of checkboxes into a controlled state. `value` will not override checkboxes that have `checked` set, as `CheckboxGroup` will take control of uncontrolled `Checkbox` components and can't override controlled ones. `value` will however override `defaultChecked` on `Checkbox`.

The `onChange` event handler for `CheckboxGroup` will fire after any `onChange` event handler set on individual `Checkbox` components. However, it is highly recommended to only set one event handler for the whole group in a controlled `CheckboxGroup`.

`Checkbox` components **must** have a `value` set on them in order to be controlled by `CheckboxGroup`.

### Usage

```jsx
import { CheckboxGroup } from 'nr1'
```

### Examples

#### Basic

```jsx
<CheckboxGroup label="My checkbox group">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>
```

#### With label and info

```jsx
<CheckboxGroup label="My checkbox group" info="Info value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>
```

#### With inline label

```jsx
<CheckboxGroup label="My checkbox group" labelInline>
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>
```

#### With description

```jsx
<CheckboxGroup label="My checkbox group" description="Description value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>
```

#### With invalid message

```jsx
<CheckboxGroup label="My checkbox group" invalid="Invalid message value">
  <Checkbox label="Checkbox 1" />
  <Checkbox label="Checkbox 2" />
  <Checkbox label="Checkbox 3" />
</CheckboxGroup>
```

#### With default values

```jsx
<CheckboxGroup label="My checkbox group" defaultValue={['1', '2']}>
  <Checkbox label="Checkbox 1" value="1" />
  <Checkbox label="Checkbox 2" value="2" />
  <Checkbox label="Checkbox 3" value="3" />
</CheckboxGroup>
```

#### Controlled component

```jsx
class MyNerdlet extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      values: ["2"],
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(event, values) {
    this.setState({ values });
  }

  render() {
    return (
      <CheckboxGroup value={this.state.values} onChange={this.onChange}>
        <Checkbox label="Checkbox 1" value="1" />
        <Checkbox label="Checkbox 2" value="2" />
        <Checkbox label="Checkbox 3" value="3" />
      </CheckboxGroup>
    );
  }
}
```

### Props

| `children` node           | Content of the CheckboxGroup.                                                                                                                                                                                                                                                                                                                                      |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` string        | Appends class names to the component.                                                                                                                                                                                                                                                                                                                              |
| `defaultValue` string\[]  | Default values of the checkbox group. The `<Checkbox>` components with matching values will be selected.Useful when you don't want to use a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                              |
| `description` string      | Message with instructions on how to fill the form field.                                                                                                                                                                                                                                                                                                           |
| `info` string             | Additional information can be displayed in an info tooltip next to the Label.                                                                                                                                                                                                                                                                                      |
| `invalid` boolean\|string | When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a `boolean` field or a `string`. When it is a `string`, as well as the invalid state being shown, the text will be shown below.                                                                                    |
| `label` string            | Text to display as label.                                                                                                                                                                                                                                                                                                                                          |
| `labelInline` boolean     | Display the label inline the form control.Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component.                                                                                                                                                                                   |
| `onChange` function       | Callback which is fired when the checkbox group value changes (a `<Checkbox>` in the group is selected).                                                                                                                                                                                                                                                           |
| `required` boolean        | If `true`, denotes the form field as required.                                                                                                                                                                                                                                                                                                                     |
| `style` object            | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                   |
| `testId` string           | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.**Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. |
| `value` string\[]         | Values of the checkbox group. The `<Checkbox>` components with matching values will be selected.If defined, it turns the component into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                |