Choose a version:

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.

Anchor to checkboxpropsCheckboxProps

Anchor to accessibilityLabel 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.
Anchor to checked checked boolean: Whether the checkbox is active.
Anchor to disabled disabled boolean: Whether the checkbox can be changed.
Anchor to error 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.
Anchor to id id string: A unique identifier for the field. When no id is set, a globally unique value will be used instead.
Anchor to label label string: Visual content to use as the checkbox label.
Anchor to name name string: An identifier for the checkbox that is unique within the nearest containing Form component.
Anchor to onChange 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, so you must store this value in state and reflect it back in the checked or value props.
Anchor to 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.

CheckboxProps

accessibilityLabel
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.
```
string
```
checked
Whether the checkbox is active.
```
boolean
```
disabled
Whether the checkbox can be changed.
```
boolean
```
error
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
```
string
```
id
A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.
```
string
```
label
Visual content to use as the checkbox label.
```
string
```
name
An identifier for the checkbox that is unique within the nearest containing `Form` component.
```
string
```
onChange
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) => void
```
value
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.
```
boolean
```

export interface CheckboxProps {
  /**
   * 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.
   */
  accessibilityLabel?: string;

  /**
   * Whether the checkbox is active.
   */
  checked?: boolean;

  /**
   * Whether the checkbox can be changed.
   */
  disabled?: boolean;

  /**
   * Indicate an error to the user. The field will be given a specific stylistic treatment
   * to communicate problems that have to be resolved immediately.
   */
  error?: string;

  /**
   * A unique identifier for the field. When no `id` is set,
   * a globally unique value will be used instead.
   */
  id?: string;

  /**
   * Visual content to use as the checkbox label.
   */
  label?: string;

  /**
   * An identifier for the checkbox that is unique within the nearest
   * containing `Form` component.
   */
  name?: string;

  /**
   * 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.
   */
  onChange?: (value: boolean) => void;

  /**
   * 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.
   */
  value?: boolean;
}

Was this section helpful?

Add a simple Checkbox

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

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

function App() {

return (

Save this information for next time

</Checkbox>

);

}

examples

Add a simple Checkbox

React

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

Checkbox

Anchor to checkboxpropsCheckboxProps

CheckboxProps

examples

Add a simple Checkbox

React

JS

Preview