---
title: Consent checkbox
description: >-
  The consent checkbox component collects customer approval for a given policy.
  Use consent checkbox to gather opt-in consent for SMS marketing.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-checkbox
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-checkbox.md
---

# Consent checkbox

**Requires enabling of the \`sms\_marketing\` capability of the \[Customer Privacy]\(/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) capability group to work.:**

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](https://shopify.dev/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent). For standard multi-purpose checkboxes, use [checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/checkbox) instead.

Only the `sms-marketing` policy is supported. Consent state is managed by Shopify and persisted automatically — custom storage isn't supported.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **SMS marketing**: Collect opt-in consent for text message marketing.
* **Pre-checked consent**: Default the checkbox to checked for policies where opt-out is preferred over opt-in.
* **Custom consent labels**: Describe the specific messaging or content the customer agrees to receive.
* **Policy compliance**: Tie the consent state to a supported policy so Shopify automatically tracks customer consent.

***

## Properties

Configure the following properties on the consent checkbox component.

* **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 control without a visual label, while still providing context to users using screen readers.

* **checked**

  **boolean**

  **Default: false**

  Whether the control is currently checked.

* **command**

  **'--auto' | '--show' | '--hide' | '--toggle'**

  **Default: '--auto'**

  Sets the action the `commandFor` target should take when this component is activated. Available options:

  * `'--auto'`: Performs the default action appropriate for the target component.
  * `'--show'`: Displays the target component if it's currently hidden.
  * `'--hide'`: Conceals the target component from view.
  * `'--toggle'`: Alternates the target component between visible and hidden states.
  * `'--copy'`: Copies the target clipboard item.

  The supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).

* **commandFor**

  **string**

  The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).

  When both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.

* **defaultChecked**

  **boolean**

  **Default: false**

  Whether the control is checked by default.

* **disabled**

  **boolean**

  **Default: false**

  Whether the control is disabled, preventing any user interaction.

* **error**

  **string**

  An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators and the message is announced to screen readers.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

* **label**

  **string**

  The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.

* **name**

  **string**

  The name attribute for the control, used to identify its value when the form is submitted. Must be unique within the nearest containing form.

* **policy**

  **'sms-marketing'**

  The policy for which buyer consent is being collected. Used by the [consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-checkbox) and [consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.

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

* **value**

  **string**

  The value used in form data when the control is checked.

### Events

The consent checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **change**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the consent checkbox value changes.

  Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

***

## Examples

### Collect SMS marketing consent

Add a pre-checked consent checkbox for SMS marketing. This example displays a consent checkbox with `defaultChecked`, a `label`, and the `sms-marketing` policy.

## Collect SMS marketing consent

![A marketing consent checkbox with a policy-compliant label for collecting buyer consent.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-default-O-1KsDyc.png)

## html

```html
<s-consent-checkbox
  defaultChecked
  label="Text me with news and offers"
  policy="sms-marketing"
></s-consent-checkbox>
```

### Display an unchecked consent prompt

Present an opt-in consent prompt that starts unchecked. This example uses a consent checkbox without `defaultChecked` so the customer must actively opt in.

## html

```html
<s-consent-checkbox
  label="I agree to receive text message promotions"
  policy="sms-marketing"
></s-consent-checkbox>
```

***

## Best 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.

***