--- title: Consent checkbox description: >- Collect buyer opt-in consent for a policy, such as marketing communications, terms, or privacy policies. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/consent-checkbox md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/consent-checkbox.md api_name: checkout-ui-extensions --- # Consent checkbox **Requires enabling of the \`sms\_marketing\` capability of the \[Customer Privacy]\(/docs/apps/build/checkout/capabilities#collect-buyer-consent) capability group to work.:** The consent checkbox component collects buyer approval for a given policy. Use consent checkbox to gather opt-in consent for marketing, terms, or privacy policies. Consent checkboxes support a `policy` attribute that connects to Shopify's consent framework. For standard multi-purpose checkboxes, use [checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/checkbox) instead. Only the `sms-marketing` policy is supported. Other consent policy types aren't available through this component. ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target) #### Use cases * **SMS marketing:** Collect opt-in consent for text message marketing tied to the `sms-marketing` policy. * **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 buyer agrees to receive. * **Policy compliance:** Tie the consent state to a supported policy so Shopify automatically tracks buyer 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/checkout-ui-extensions/2026-07-rc/web-components/forms/consent-checkbox) and [consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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\** 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 & TData): 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 Show a pre-checked consent checkbox tied to a marketing policy. This example uses an `s-consent-checkbox` with `defaultChecked` and `policy` set to `sms-marketing`. ## Collect SMS marketing consent ![A rendered example of the consent-checkbox component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-default-O-1KsDyc.png) ## html ```html ``` ### Display an unchecked consent prompt Prompt the buyer to actively opt in by leaving the checkbox unchecked. This example presents an `s-consent-checkbox` without `defaultChecked`, requiring the buyer to check it manually. ## html ```html ``` *** ## Best 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 Shopify records consent on the customer. You can query the consent state with the GraphQL Admin API ([SMS marketing consent](https://shopify.dev/docs/api/admin-graphql/latest/objects/CustomerSmsMarketingConsentState)). * **Respect opt-in preferences:** Use `defaultChecked` when opt-out is the norm. Leave it unchecked when explicit opt-in is required by regulation. ***