Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

ConsentCheckbox

The consent checkbox component collects customer approval for a given policy. Use consent checkbox to gather opt-in consent for SMS marketing.

Consent checkboxes support a policy attribute that connects to Shopify's consent framework. For standard multi-purpose checkboxes, use Checkbox instead.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the ConsentCheckbox component.

Anchor to policy policy 'sms-marketing' required: The policy for which buyer consent is being collected for.

sms-marketing: Represents the policy for SMS marketing consent.
Anchor to accessibilityLabel accessibilityLabel string: A label used for users of 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 is disabled, preventing any user interaction.
Anchor to error error string: An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators.
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 fired when the checkbox value changes. 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 ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.

Anchor to ExamplesExamples

Anchor to Collect SMS marketing consentCollect SMS marketing consent

Use consent checkbox to collect opt-in consent for text message promotions. This example shows a basic consent checkbox for the SMS marketing policy.

Collect SMS marketing consent

A consent checkbox for opting in to SMS marketing

Collect SMS marketing consent

import {

reactExtension,

ConsentCheckbox,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

Text me with news and offers

</ConsentCheckbox>

);

}

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

});

React

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

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

Anchor to Pair ConsentCheckbox with ConsentPhoneFieldPair ConsentCheckbox with ConsentPhoneField

Combine a consent checkbox with a consent phone field to collect SMS marketing opt-in and a phone number together. This example shows both components working in a single form flow.

Pair ConsentCheckbox with ConsentPhoneField

Pair ConsentCheckbox with ConsentPhoneField

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 (

Text me with news and offers

</ConsentCheckbox>

<InlineStack

inlineAlignment="start"

padding={[

'none',

'tight',

]}

<ConsentPhoneField

label="Phone"

policy="sms-marketing"

</InlineStack>

</BlockStack>

);

}

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

});

React

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

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

Anchor to Best practicesBest practices

Be transparent: Write labels that clearly describe what the customer is consenting to, such as "Text me with news and offers."
Use supported policies: Always set the policy attribute to a supported value like sms-marketing so Shopify can track consent.
Respect opt-in preferences: Default to unchecked unless opt-out is the intended behavior for the policy.
Don't duplicate consent: Avoid rendering multiple consent checkboxes for the same policy on the same page.

Anchor to LimitationsLimitations

Only the sms-marketing policy is supported.

Was this page helpful?