电话号码 PhoneField

区号下拉 + 号码输入框的组合。区号使用可搜索的下拉选择，支持按区号、中文或英文地区名查找。

examples/phone-field/basic.html

<div class="grid grid-cols-[minmax(8.5rem,0.42fr)_minmax(0,1fr)] gap-2">
  <div class="relative" data-cb-select>
    <select name="areaCode" class="sr-only" tabindex="-1" aria-hidden="true">
      <option value="+852" data-keywords="Hong Kong xianggang">+852 中国香港</option>
      …
    </select>
    <button type="button" data-cb-select-trigger aria-label="国家/地区区号">…</button>
    <div data-cb-select-panel hidden class="… w-72">…</div>
  </div>
  <input type="tel" inputmode="numeric" autocomplete="tel-national" data-cb-digits />
</div>

• 区号列最小 136px，占整行约 42%；下拉面板固定 288px 宽（w-72），不受区号列宽度限制
• 号码输入框加 data-cb-digits，只保留数字
• 提交给后端时，区号与号码分开存储

使用建议

推荐

• 区号选项格式：+852 中国香港，并在 data-keywords 中写上英文名，方便搜索
• 默认区号跟随页面语言或业务主要市场（官网默认 +852）

避免

• 把区号和号码合在一个输入框里让用户自己输入 +852

无障碍

• 可见标签指向号码输入框；区号下拉使用 aria-label
• 如需把两者作为整体朗读，可在外层加 role="group" aria-labelledby="…"

与 v2 的差异

v2 现状	规范
数字过滤写在 Vue 组件里	原生 HTML 使用 data-cb-digits
区号使用原生下拉，不能搜索	可搜索的自定义下拉