← Web Components

Web Components · Account

<mmm-phone-input>

Country-aware phone input with a flag + dial-code dropdown. Used standalone or embedded inside <mmm-login>, <mmm-signup>, and the checkout address forms. Auto-inherits theme-mode from its nearest ancestor.

Overview

The dropdown shows search-friendly country flags + dial codes; selection writes both the dial-code and the formatted value into the element. Read the current state via el.value and el.countryCode property getters — they reflect the live state regardless of how the input was changed.

When dropped inside another mmm-* component that has theme-mode set, this element inherits that mode automatically (no need to pass it down).

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-phone-input default-country="IN" placeholder="Enter your phone"></mmm-phone-input>

Attributes

AttributeTypeDefaultDescription
default-countrystringINISO 3166-1 alpha-2 country code for the initial dial-code pick.
valuestring—Initial phone value. Reflected back to the attribute on change.
country-codestring—Override the country code (ISO alpha-2) used to pick the dial-code prefix.
placeholderstringPhone numberInput placeholder.
disabledbooleanfalsePresence-checked. Disable the input and dropdown.
requiredbooleanfalsePresence-checked. Required validation flag.
namestring—Form-field name (for native form submission).
errorbooleanfalsePresence-checked. Renders the error state (red border).
borderedbooleanfalsePresence-checked. When set, renders with a full border; when omitted, the field uses the underline style.
autofocusbooleanfalsePresence-checked. Focus the phone input on mount.
theme-modestringinheritedlight or dark. Auto-inherits from the nearest ancestor with the attribute set.

Properties & events

MemberReturnsDescriptionNotes
el.valuestring (getter / setter)—Current phone number. Setting it also reflects the attribute.
el.countryCodestring (getter)—Current dial-code prefix (e.g. +91).
EventTargetPayload
phone-changeelement (bubbles, composed){ phone, dialCode, countryCode, fullNumber }
invalid-inputelement (bubbles, composed){ rawValue: string }

Live preview

store sample-store tag <mmm-phone-input>

Examples

1. Default — India by default

<mmm-phone-input default-country="IN"></mmm-phone-input>

2. US default, dark mode, required

<mmm-phone-input
  default-country="US"
  required="true"
  theme-mode="dark">
</mmm-phone-input>

3. Read the value programmatically

const input = document.querySelector('mmm-phone-input');
input.addEventListener('phone-change', (e) => {
  console.log('Full number:', e.detail.countryCode + e.detail.value);
});

/* Or read on demand */
console.log(input.value, input.countryCode);

4. Inline error message

<mmm-phone-input
  default-country="IN"
  error="Please enter a 10-digit phone number">
</mmm-phone-input>