spz-phonenumber#

#When to Use

• When you need to use a selection list with national flags to modify the area code in the input box.
• When you need to verify if a phone number is valid.

#Code Demonstration

#Basic Usage

• Must have an input sub-element.
• If support for mobile area code selection is needed, there must be a sub-element with role="phone-area" attribute, indicating a root node for mobile area code selection.
  • role="flag" indicates an element displaying the national flag, which will automatically update its background image when switching different country codes.
  • role="areacode" indicates a mobile area code selector, where the component will add mobile area code data to the current element.

<spz-phonenumber
  layout="container"
  phone-pattern="[\+0-9\(\).\s-]+"
  default-country="CN"
  default-phone-code="86"
>
  <input
    id="email_or_phone"
    name="email_or_phone"
    type="text"
    required
    pattern="([a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)|([\+0-9\(\).\s-]+)"
  >
  <label for="email_or_phone">Email or Phone</label>
  <div validation-for="email_or_phone" visible-when-invalid="customError" hidden>Please enter a valid phone</div>
  <div validation-for="email_or_phone" visible-when-invalid="valueMissing" hidden>Enter a valid Email / phone number</div>

  <div role="phone-area" hidden>
    <div role="flag"></div>
    <select role="areacode">
      <option value="" disabled>*</option>
    </select>
  </div>
</spz-phonenumber>

#Attributes

#AI Summary (LLM Ready)

• Component ID: spz-phonenumber
• One-line purpose: Display an input box that allows selecting the area code through a national flag.
• Detected attribute rows: 3
• Detected method subsections: 0
• Detected event subsections: 0
• Top attribute names: phone-pattern, default-country, default-phone-code
• Top method names: none (needs manual completion)
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/