---
title: Checkbox
description: >-
  Use this component when you want to provide users with a clear selection
  option, such as for agreeing to terms and conditions or selecting multiple
  options from a list.
api_version: 2023-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/checkbox
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/components/forms/checkbox.md
---

# Checkbox

Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.

## CheckboxProps

* accessibilityLabel

  string

  A label used for users using assistive technologies like screen readers. When set, any children or `label` supplied will not be announced. This can also be used to display a Checkbox without a visual label, while still providing context to users using screen readers.

* checked

  boolean

  Whether the checkbox is active.

* disabled

  boolean

  Whether the checkbox can be changed.

* error

  string

  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

* id

  string

  A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.

* label

  string

  Visual content to use as the checkbox label.

* name

  string

  An identifier for the checkbox that is unique within the nearest containing `Form` component.

* onChange

  (value: boolean) => void

  A callback that is run whenever the checkbox is changed. This callback is called with a boolean indicating whether the checkbox should now be active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `checked` or `value` props.

* value

  boolean

  Whether the checkbox is active. This prop is an alias for `checked`, and can be useful in form libraries that provide a normalized API for dealing with both `boolean` and `string` values. If both `value` and `checked` are set, `checked` takes precedence.

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2023-10/checkbox-default.png)

### Examples

* #### Add a simple Checkbox

  ##### React

  ```tsx
  import {render, Checkbox} from '@shopify/ui-extensions-react/admin';

  render('Playground', () => <App />);

  function App() {
    return (
      <Checkbox id="checkbox" name="checkbox">
        Save this information for next time
      </Checkbox>
    );
  }
  ```

  ##### JS

  ```js
  import {extend, Checkbox} from '@shopify/ui-extensions/admin';

  extend('Playground', (root) => {
    const checkbox = root.createComponent(
      Checkbox,
      {id: 'checkbox', name: 'checkbox'},
      'Save this information for next time',
    );

    root.appendChild(checkbox);
  });
  ```