# 可输入的下拉 Combobox

分类：表单 · React：Combobox

可以打字筛选的下拉；data-multiple 多选成 chip，data-creatable 可以新建。

## 示例
```html
<div data-xxd-combobox style="width:100%;max-width:240px"><input class="xxd-input" placeholder="输入筛选" aria-label="主色"><ul class="xxd-listbox"><li class="xxd-option" data-value="ink">墨色</li><li class="xxd-option" data-value="#1d9bf0">X 蓝</li><li class="xxd-option" data-value="#3b74b8">湖蓝</li><li class="xxd-option" data-value="#5a8a3c">苔绿</li></ul></div>
<div data-xxd-combobox data-multiple data-creatable style="width:100%;max-width:280px"><div class="xxd-taginput"><input placeholder="选或新建标签" aria-label="标签"></div><ul class="xxd-listbox"><li class="xxd-option">海报</li><li class="xxd-option">封面</li><li class="xxd-option">卡片</li></ul></div>
```

## 属性与类名
- `data-multiple`：多选：选中的变成前面的 chip（.xxd-taginput 包住 input）
- `data-creatable`：没有完全相同的项时出现「创建「xx」」
- `data-create-label`：自定义「创建」的字
- `.xxd-option-group`：分组（筛掉后整组隐藏）
- 类名：`xxd-listbox` `xxd-option` `xxd-option__hint`

## JS
```js
wrap.addEventListener("xxd:change", (e) => e.detail.value)
```

## 键盘与读屏
- 输入框 role=combobox + aria-expanded，列表 role=listbox，高亮项用 aria-activedescendant
- ↑ ↓ 移动，Enter 选择，Esc 收起