---
title: ConsentCheckbox
description: >-
  Use buyer consent checkboxes for collecting the buyer's approval for a given
  policy.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentcheckbox
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentcheckbox.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Consent​Checkbox

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## ConsentCheckboxProps

* **policy**

  **"sms-marketing"**

  **required**

  The policy for which buyer consent is being collected for.

  `sms-marketing`: Represents the policy for SMS marketing consent.

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

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

* **name**

  **string**

  An identifier for the field 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.

* **toggles**

  **string**

  The component's identifier whose visibility will be toggled when this component is actioned.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/consent-checkbox-default-2GIr9B5-.png)

### Examples

* #### Basic ConsentCheckbox

  ##### React

  ```tsx
  import {
    reactExtension,
    ConsentCheckbox,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.page.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <ConsentCheckbox policy="sms-marketing">
        Text me with news and offers
      </ConsentCheckbox>
    );
  }
  ```

  ##### JS

  ```js
  import {extension, ConsentCheckbox} from '@shopify/ui-extensions/customer-account';

  export default extension('customer-account.page.render', (root) => {
    const consentCheckbox = root.createComponent(
      ConsentCheckbox,
      {policy: 'sms-marketing'},
      'Text me with news and promotions',
    );

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

* #### ConsentCheckbox with ConsentPhoneField

  ##### React

  ```tsx
  import {
    reactExtension,
    BlockStack,
    ConsentCheckbox,
    ConsentPhoneField,
    InlineStack,
    InlineSpacer,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.page.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <BlockStack>
        <ConsentCheckbox policy="sms-marketing">
          Text me with news and offers
        </ConsentCheckbox>
        <InlineStack
          inlineAlignment="start"
          padding={[
            'none',
            'none',
            'none',
            'tight',
          ]}
        >
          <InlineSpacer spacing="extraTight" />
          <ConsentPhoneField
            label="Phone"
            policy="sms-marketing"
          />
        </InlineStack>
      </BlockStack>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    BlockStack,
    ConsentCheckbox,
    ConsentPhoneField,
    InlineStack,
    InlineSpacer,
  } from '@shopify/ui-extensions/customer-account';

  export default extension('customer-account.page.render', (root) => {
    const consentCheckbox = root.createComponent(
      ConsentCheckbox,
      {
        policy: 'sms-marketing',
      },
      'Text me with news and offers',
    );

    const inlineSpacer = root.createComponent(InlineSpacer, {
      spacing: 'extraTight',
    });

    const consentPhoneField = root.createComponent(ConsentPhoneField, {
      label: 'Phone',
      policy: 'sms-marketing',
    });

    const inlineStack = root.createComponent(
      InlineStack,
      {
        inlineAlignment: 'start',
        padding: ['none', 'none', 'none', 'tight'],
      },
      [inlineSpacer, consentPhoneField],
    );

    const layout = root.createComponent(BlockStack, undefined, [
      consentCheckbox,
      inlineStack,
    ]);

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

## Related

[Component - ConsentCheckbox](consent-checkbox)