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

When a user chooses one or more options provided

The checkbox state can be controlled through the `checked` and `indeterminate` property. If neither of those is provided the checkbox will manage its own state.

You can listen to the checkbox state changes through the `onChange` prop.

**Note**: Setting `checked` will override `defaultChecked` as it puts the component into a controlled state. `defaultChecked` should only be used for uncontrolled checkboxes.

### Usage

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

### Examples

#### Basic

```jsx
<div className="nr1-Docs-prettify">
  <Checkbox onChange={(event) => alert('Foo')} label="Foo" />
  <Checkbox indeterminate label="Bar" />
  <Checkbox checked disabled label="Baz" />
</div>
```

#### With info

```jsx
<Checkbox 
  onChange={(event) => alert('Foo')} 
  info="Info value" 
  label="Foo" 
/>
```

#### With description

```jsx
<Checkbox
  onChange={(event) => alert('Foo')}
  description="Description value"
  label="Foo"
/>
```

#### With invalid message

```jsx
<Checkbox
  onChange={(event) => alert('Foo')}
  invalid="Invalid message value"
  label="Foo"
/>
```

#### Controlled component

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

    this.state = {
      isChecked: false,
    };

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

  onChange(event) {
    console.log(event);
    const isChecked = event.target.checked;

    this.setState({ isChecked });
  }

  render() {
    return (
      <Checkbox
        checked={this.state.isChecked}
        onChange={this.onChange}
        label="Foo"
      />
    );
  }
}
```

### Props

| `checked` boolean         | If `true`, the checkbox is checked. If defined, it turns the component into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                                                                                              |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` string        | Appends class names to the component. Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                      |
| `defaultChecked` boolean  | If `true`, the initial state of the checkbox is `checked`. 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.                                                                                                                                                                                                                                                                                                                             |
| `disabled` boolean        | If `true`, the checkbox is not available for interaction.                                                                                                                                                                                                                                                                                                                            |
| `indeterminate` boolean   | If `true`, the checkbox is in an indeterminate state. If both the `checked` and `indeterminate` prop are provided then the `indeterminate` prop will prevail.                                                                                                                                                                                                                        |
| `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.                                                                                                                                                                                                                                                                                                                                                            |
| `onChange` function       | Callback fired any time the selected state of the checkbox changes.                                                                                                                                                                                                                                                                                                                  |
| `spacingType` enum\[]     | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Checkbox.SPACING_TYPE.EXTRA_LARGE, Checkbox.SPACING_TYPE.LARGE, Checkbox.SPACING_TYPE.MEDIUM, Checkbox.SPACING_TYPE.NONE, Checkbox.SPACING_TYPE.OMIT, Checkbox.SPACING_TYPE.SMALL  |
| `style` object            | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                            |
| `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            | The value of the component. This goes into the inner checkbox input, not the component itself, and is returned as part of the `onChange` event target element.                                                                                                                                                                                                                       |