---
title: Migrate to the Polaris consent phone field component
description: >-
  Learn how to migrate the ConsentPhoneField 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-phone-field
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/consent-phone-field.md
---

# Migrate to the Polaris consent phone field component

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

The consent phone field shares the same property changes as the phone field component (`readonly`, `accessory`, removed and new properties). Refer to the [phone field migration guide](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/phone-field) for details on those changes. This guide covers only the consent-specific differences.

***

## Updated properties

### policy

The `policy` prop works the same as before. Set it to the consent policy this phone field is tied to (for example, `"sms-marketing"`).

## Basic consent phone field migration

##### 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-phone-field label="Phone" policy="sms-marketing" />
  );
}
```

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

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

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

function Extension() {
  return (
    <ConsentPhoneField
      label="Phone"
      policy="sms-marketing"
    />
  );
}
```

***

## New properties

The previous `ConsentPhoneField` was uncontrolled — it didn't accept a `value` prop, so apps couldn't drive the input from external state. The Polaris consent phone field adds controlled support through `value`. In addition to the new properties listed in the [phone field migration guide](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/phone-field#new-properties), the consent phone field also introduces:

| New prop | Type | Description |
| - | - | - |
| [`value`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/consent-phone-field#properties-propertydetail-value) | `string` | Current value of the field. Use to drive the input from app state. |

***