Choose a version:

Checkbox

Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.

Anchor to checkboxpropsCheckboxProps

Anchor to accessibilityLabel accessibilityLabel string: A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
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 name name string: An identifier for the field 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 toggles toggles string: The component's identifier whose visibility will be toggled when this component is actioned.
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 buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
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
```
name
An identifier for the field 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
```
toggles
The component's identifier whose visibility will be toggled when this component is actioned.
```
string
```
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 extends DisclosureActivatorProps {
  /**
   * A unique identifier for the field. When no `id` is set,
   * a globally unique value will be used instead.
   */
  id?: string;

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

  /**
   * 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;

  /**
   * 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 label used for buyers using assistive technologies. When set, any
   * `children` supplied to this component will not be announced to screen reader users.
   */
  accessibilityLabel?: 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;
}

Was this section helpful?

Basic Checkbox

import {

reactExtension,

Checkbox,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

Save this information for next time

</Checkbox>

);

}

examples

Basic Checkbox

React

import {
  reactExtension,
  Checkbox,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

JS

import {extension, Checkbox} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const checkbox = root.createComponent(
    Checkbox,
    {id: 'checkbox', name: 'checkbox'},
    'Save this information for next time',
  );

  root.appendChild(checkbox);
});

Preview

Anchor to examplesExamples

Anchor to example-embedding-links-in-checkbox-componentsEmbedding links in checkbox components

To provide buyers with additional information or references, couple it with link components seamlessly within checkbox components. This can be done by including links as part of the checkbox label in the checkbox. This will provide an easy way to access relevant content that buyers may need.

Was this section helpful?

Embedding links in checkbox components

import {

reactExtension,

Checkbox,

Link,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <CheckBoxLinks />,

);

export const CheckBoxLinks = () => {

return (

<Checkbox

id="checkbox1"

name="checkboxchoices"

I agree to the{' '}

terms and conditions

</Link>{' '}

and{' '}

</Link>{' '}

of the store related to pricing, payment,

shipping, returns, and liability set forth

by Ride Sports

</Checkbox>

);

};

examples

Embedding links in checkbox components

description

React

import {
  reactExtension,
  Checkbox,
  Link,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <CheckBoxLinks />,
);

export const CheckBoxLinks = () => {
  return (
    <Checkbox
      id="checkbox1"
      name="checkboxchoices"
    >
      I agree to the{' '}
      <Link to="https://www.shopify.com">
        terms and conditions
      </Link>{' '}
      and{' '}
      <Link to="https://www.shopify.com">
        privacy policy
      </Link>{' '}
      of the store related to pricing, payment,
      shipping, returns, and liability set forth
      by Ride Sports
    </Checkbox>
  );
};

JavaScript

import {
  extension,
  Checkbox,
  Link,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const checkbox = root.createComponent(
      Checkbox,
      {
        id: 'checkbox1',
        name: 'checkboxchoices',
      },
      [
        ' I agree to the ',
        root.createComponent(
          Link,
          {to: 'https://www.shopify.com'},
          'terms and conditions',
        ),
        ' and ',
        root.createComponent(
          Link,
          {to: 'https://www.shopify.com'},
          'privacy policy',
        ),
        ' of the store related to pricing, payment, shipping, returns, and liability set forth by Ride Sports.',
      ],
    );

    root.appendChild(checkbox);
  },
);