---
title: Migrate to the Polaris consent checkbox component
description: >-
  Learn how to migrate the ConsentCheckbox component to Polaris web components
  in checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/consent-checkbox
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/consent-checkbox.md
---

# Migrate to the Polaris consent checkbox component

The Polaris consent checkbox component renders a checkbox tied to a customer consent policy. It replaces the previous [`ConsentCheckbox`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/forms/consentcheckbox) component and is available as [`<s-consent-checkbox>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris consent checkbox component.

### toggles

The previous `ConsentCheckbox` `toggles` prop has been replaced with [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox#properties-propertydetail-command) and [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox#properties-propertydetail-commandfor).

| Previous pattern | New pattern | Migration notes |
| - | - | - |
| `toggles="details-id"` | `command="--toggle"` + `commandFor="details-id"` | Disclosure behavior now uses the command pattern. |

The example below pairs the consent checkbox with an optional `<s-details>` panel disclosed by the `command` pattern. The `<s-details>` element isn't required by the migration — use it when you want a related details panel that opens when the checkbox is checked.

## Migrating toggles to command

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-consent-checkbox
        policy="sms-marketing"
        command="--toggle"
        commandFor="sms-details"
      >
        I want to receive SMS updates
      </s-consent-checkbox>
      <s-details id="sms-details">
        <s-text>
          By checking this box, you agree to receive text messages about your
          order.
        </s-text>
      </s-details>
    </>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  ConsentCheckbox,
  Disclosure,
  Text,
  View,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Disclosure>
      <ConsentCheckbox
        policy="sms-marketing"
        toggles="sms-details"
      >
        I want to receive SMS updates
      </ConsentCheckbox>
      <View id="sms-details">
        <Text>
          By checking this box, you agree to receive text messages about your
          order.
        </Text>
      </View>
    </Disclosure>
  );
}
```

***

## New properties

The Polaris consent checkbox component introduces the following new properties:

| New prop | Type | Description |
| - | - | - |
| [`label`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox#properties-propertydetail-label) | `string` | Text label for the checkbox. Use as an alternative to passing label text as children. |
| [`value`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox#properties-propertydetail-value) | `string` | Value submitted with the form. |
| [`defaultChecked`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-checkbox#properties-propertydetail-defaultchecked) | `boolean` | Initial checked state for uncontrolled usage. |

***