spz-area#

#When to Use

When you need to select from a set of related data, such as country, province, and phone area code. It's commonly used on address book pages.

#Code Demonstration

#Basic Usage

Basic usage. Normally use country, province, and areacode three selection boxes to link together. Instructions for use:

• When it is province or areacode, you need to specify a country-id to mark and link with elements that have the country attribute.
• When a user selects a country region, the province selection data will automatically be replaced with the province data of the current country, and the mobile phone area code will automatically switch to the current selected country's mobile phone area code.
• When the country or province corresponding element does not have an input hidden field written, the country or province attribute will be used as the name attribute value of the input to generate a default hidden field, the value being an empty string or the currently selected value.

<form method="POST" refresh-when-submit-success custom-validation="show-first-on-submit" action-xhr="/api/customers/addresses">
  <!-- ... -->
   <spz-area country id="addressesAddCountry" layout="container">
    <select name="country_code" value="" required>
      <option empty value="" selected disabled>Country</option>
    </select>
  </spz-area>

  <spz-area province layout="container" country-id="addressesAddCountry">
    <select name="province_code" value="">
      <option empty value="" selected disabled>Province</option>
    </select>
    <input type="hidden" name="province" value="">
  </spz-area>

  <spz-area areacode layout="container" country-id="addressesAddCountry">
    <select name="phone_area_code" value="">
      <option empty value="" selected disabled>Area code</option>
    </select>
  </spz-area>
  <!-- ... -->
</form>

#Attributes

#AI Summary (LLM Ready)

• Component ID: spz-area
• One-line purpose: Implement cascading selection.
• Detected attribute rows: 4
• Detected method subsections: 0
• Detected event subsections: 0
• Top attribute names: country-id, country, province, areacode
• 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/