Skip to main content
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.

ConsentCheckbox

Use the ConsentCheckbox component for collecting the buyer's approval for a given policy.

Support
Targets (50)

Supported targets

Anchor to ConsentCheckboxPropsConsentCheckboxProps

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 Basic ConsentCheckboxBasic ConsentCheckbox

Basic ConsentCheckbox

Example

Basic ConsentCheckbox

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

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

function Extension() {
return (
<ConsentCheckbox policy="sms-marketing">
Text me with news and offers
</ConsentCheckbox>
);
}
import {extension, ConsentCheckbox} from '@shopify/ui-extensions/checkout';

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

root.appendChild(consentCheckbox);
});

Anchor to ConsentCheckbox with ConsentPhoneFieldConsentCheckbox with ConsentPhoneField

ConsentCheckbox with ConsentPhoneField

Example

ConsentCheckbox with ConsentPhoneField

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

export default reactExtension(
'purchase.checkout.block.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>
);
}
import {
extension,
BlockStack,
ConsentCheckbox,
ConsentPhoneField,
InlineStack,
InlineSpacer,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.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

  • Write transparent labels: Clearly describe what the buyer is agreeing to receive, including the type and frequency of messages.
  • Use supported policies: For SMS marketing, set policy to sms-marketing so that Shopify can track consent automatically.
  • Respect opt-in preferences: Use default checked state when opt-out is the norm. Leave it unchecked when explicit opt-in is required by regulation.

Anchor to LimitationsLimitations

  • Only the sms-marketing policy is currently supported. Other policy types aren't available.

Anchor to RelatedRelated

ComponentConsentCheckbox
Was this page helpful?