Choose a version:

Consent phone field

Requires enabling of the sms_marketing capability of the Customer Privacy capability group to work.

The consent phone field component collects phone numbers for text message marketing consent. The phone number is automatically saved.

Consent phone fields connect to Shopify's consent framework and include built-in number formatting. For general phone number collection without consent tracking, use phone field instead.

Only the sms-marketing policy is supported. The phone number is persisted automatically by Shopify — custom storage isn't supported.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the consent phone field component.

Anchor to autocomplete autocomplete AutocompleteField | `${} ${AutocompleteField}` | `${} ${AutocompleteField}` | `${} ${} ${AutocompleteField}` | "on" | "off" Default: 'on': A hint about the intended content of the field for browser autofill.

When set to on (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.

When set to off, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.

Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.

Learn more about the set of autocomplete values supported in browsers.
Anchor to defaultValue defaultValue string: The initial value of the field when it first loads. Unlike placeholder, this is a real value that the user can edit and that gets submitted with the form. Once the user starts typing, their input replaces this value.
Anchor to disabled disabled boolean Default: false: Whether the field 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 and the message is announced to screen readers.
Anchor to id 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.
Anchor to label label string: The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.
Anchor to labelAccessibilityVisibility labelAccessibilityVisibility 'visible' | 'exclusive' Default: 'visible': Controls whether the label is visible to all users or only to screen readers.

visible: The label is shown to everyone.

exclusive: The label is visually hidden but still announced by screen readers.
Anchor to name name string: The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.
Anchor to policy policy 'sms-marketing': The policy for which buyer consent is being collected. Used by the consent checkbox and consent phone field components to identify the type of marketing permission requested.

sms-marketing: Represents the policy for SMS marketing consent.
Anchor to readOnly readOnly boolean Default: false: Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.
Anchor to required required boolean Default: false: Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.
Anchor to type type 'mobile' | '' Default: '': The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.

Styling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the error prop to show results.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

AutocompleteSection

The “section” scopes the autocomplete data that should be inserted to a specific area of the page. Commonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page.

`section-${string}`

AutocompleteGroup

The contact information group the autocomplete data should be sourced from.

"shipping" | "billing"

Anchor to EventsEvents

The consent phone field component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur blur <typeof tagName>: A callback fired when the consent phone field loses focus.

Learn more about the blur event.
Anchor to change change <typeof tagName>: A callback fired when the consent phone field value changes.

Learn more about the change event.
Anchor to focus focus <typeof tagName>: A callback fired when the consent phone field receives focus.

Learn more about the focus event.
Anchor to input input <typeof tagName>: A callback fired when the user inputs data into the consent phone field.

Learn more about the input 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.

(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.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to SlotsSlots

The consent phone field component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to accessory accessory HTMLElement: Additional interactive content displayed within the field. Accepts button and clickable components with text content only. Other component types or complex layouts are not supported.

Anchor to ExamplesExamples

Anchor to Collect a phone number for SMS consentCollect a phone number for SMS consent

Add a phone input pre-filled with a default number for SMS marketing. This example displays a consent phone field with a label, policy, and defaultValue.

Collect a phone number for SMS consent

html

<s-consent-phone-field

label="Phone number"

policy="sms-marketing"

defaultValue="587-746-7439"

></s-consent-phone-field>

Anchor to Require a phone number for SMS consentRequire a phone number for SMS consent

Validate that a phone number is provided before submission. This example shows a consent phone field with required and an error message for missing input.

html

<s-consent-phone-field

label="Phone number for SMS updates"

policy="sms-marketing"

required

error="Enter a phone number to receive order updates"

></s-consent-phone-field>

Anchor to Customize the phone field labelCustomize the phone field label

Describe the purpose of the phone number being collected. This example uses a consent phone field with a custom label for SMS updates.

html

<s-consent-phone-field

label="Mobile number for SMS updates"

policy="sms-marketing"

></s-consent-phone-field>

Anchor to Best practicesBest practices

Label clearly: Write labels that explain why the phone number is being collected, such as "Phone number for SMS updates."
Pair with consent checkbox: Use the consent checkbox alongside this component to collect explicit marketing consent.
Pre-fill when available: Use defaultValue to display a known phone number so customers can confirm without retyping.
Use supported policies: Always set the policy attribute to a supported value like sms-marketing so Shopify can track consent.

Was this page helpful?