# 自绘选择 Picker

分类：表单 · React：Select

原生 <select> 做不到的：分组、每项说明、图标、多选。简单场景继续用 Select（原生）。

## 示例
```html
<div class="xxd-picker" data-xxd-picker style="width:100%;max-width:220px">
  <button class="xxd-picker__trigger"><span class="xxd-picker__value"></span></button>
  <div class="xxd-listbox">
    <div class="xxd-option-group" role="group" aria-label="画质">
      <div class="xxd-option-group__label">画质</div>
      <div class="xxd-option" data-value="high" aria-selected="true"><span>高<small>2K，慢一点</small></span></div>
      <div class="xxd-option" data-value="standard"><span>标准<small>1K，最快</small></span></div>
    </div>
    <div class="xxd-option-group" role="group" aria-label="其他">
      <div class="xxd-option" data-value="auto">跟随会员计划</div>
      <div class="xxd-option" data-value="x" aria-disabled="true">4K（即将推出）</div>
    </div>
  </div>
</div>
<div class="xxd-picker" data-xxd-picker data-multiple data-placeholder="选择标签" style="width:100%;max-width:220px">
  <button class="xxd-picker__trigger"><span class="xxd-picker__value"></span></button>
  <div class="xxd-listbox">
    <div class="xxd-option" data-value="poster" aria-selected="true">海报</div>
    <div class="xxd-option" data-value="cover">封面</div>
    <div class="xxd-option" data-value="card">卡片</div>
  </div>
</div>
```

## 属性与类名
- `data-multiple`：多选（勾选，列表不关）
- `data-placeholder`：没选时显示的字
- `data-size`：sm
- `aria-invalid`：出错
- `data-disabled`：禁用
- 类名：`xxd-picker` `xxd-picker__trigger` `xxd-picker__value` `xxd-option-group` `xxd-option-group__label`

## JS
```js
picker.addEventListener("xxd:change", (e) => e.detail.value)  // 多选时是数组；picker.dataset.value 逗号分隔
```

## 键盘与读屏
- 按钮 aria-haspopup=listbox，列表 aria-activedescendant 跟随高亮
- ↑ ↓ Home End 移动，Enter / 空格选择，Esc 关，输入首字跳转