# 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.

```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
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);
});

```

## CheckboxProps

### CheckboxProps

### accessibilityLabel

value: `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

value: `boolean`

Whether the checkbox is active.

### disabled

value: `boolean`

Whether the checkbox can be changed.

### error

value: `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

value: `string`

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

### label

value: `string`

Visual content to use as the checkbox label.

### name

value: `string`

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

### onChange

value: `(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

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.