选择器
触发器与 input 同视觉；弹层支持 ↑↓ 移动、Enter 选中、Esc / 外点关闭，选中值同步隐藏 input。增强：data-select-search 可搜索过滤、data-select-multiple 多选（逗号分隔）、data-select-max 上限。
基础单选
可搜索（data-select-search）
华北
华东
华南
多选（data-select-multiple + data-select-max="3"）
<div class="demo-col"> <p class="chart-cap" style="margin:0 0 6px">基础单选</p> <div class="select" data-select style="max-width:280px"> <button class="select-trigger pressable focus-ring" type="button" aria-haspopup="listbox" aria-expanded="false"> <span class="select-value is-empty">选择一种水果</span> <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg> </button> <div class="select-panel" hidden> <button class="select-option" type="button" data-value="apple">苹果</button> <button class="select-option" type="button" data-value="banana">香蕉</button> <button class="select-option" type="button" data-value="orange">橙子</button> <button class="select-option" type="button" data-value="grape">葡萄</button> <button class="select-option" type="button" data-value="mango">芒果</button> </div> <input type="hidden" data-select-value name="fruit" /> </div> <p class="chart-cap" style="margin:14px 0 6px">可搜索（data-select-search）</p> <div class="select" data-select data-select-search style="max-width:280px"> <button class="select-trigger pressable focus-ring" type="button" aria-haspopup="listbox" aria-expanded="false"> <span class="select-value is-empty">搜索城市…</span> <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg> </button> <div class="select-panel" hidden> <div class="select-group"> <p class="select-group-label">华北</p> <button class="select-option" type="button" data-value="bj">北京</button> <button class="select-option" type="button" data-value="tj">天津</button> </div> <div class="select-group"> <p class="select-group-label">华东</p> <button class="select-option" type="button" data-value="sh">上海</button> <button class="select-option" type="button" data-value="hz">杭州</button> <button class="select-option" type="button" data-value="nj">南京</button> </div> <div class="select-group"> <p class="select-group-label">华南</p> <button class="select-option" type="button" data-value="gz">广州</button> <button class="select-option" type="button" data-value="sz">深圳</button> </div> </div> <input type="hidden" data-select-value name="city" /> </div> <p class="chart-cap" style="margin:14px 0 6px">多选（data-select-multiple + data-select-max="3"）</p> <div class="select" data-select data-select-multiple data-select-max="3" data-select-placeholder="选择标签（最多 3 个）" style="max-width:280px"> <button class="select-trigger pressable focus-ring" type="button" aria-haspopup="listbox" aria-expanded="false"> <span class="select-value is-empty">选择标签（最多 3 个）</span> <button class="select-clear" type="button" aria-label="清除">×</button> <svg class="select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg> </button> <div class="select-panel" hidden> <button class="select-option" type="button" data-value="ts">TypeScript</button> <button class="select-option" type="button" data-value="react">React</button> <button class="select-option" type="button" data-value="vue">Vue</button> <button class="select-option" type="button" data-value="svelte">Svelte</button> <button class="select-option" type="button" data-value="rust">Rust</button> <button class="select-option" type="button" data-value="go">Go</button> </div> <input type="hidden" data-select-value name="tags" /> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initSelect } from '@icen.ai/ui/kit/select';initSelect();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add select
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/select.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initSelect } from '@icen.ai/ui/behaviors/select';initSelect(); <!-- 基础单选 --><div class="select" data-select>…</div> <!-- 可搜索（带分组） --><div class="select" data-select data-select-search>…</div> <!-- 多选 + 上限 --><div class="select" data-select data-select-multiple data-select-max="3">…</div><!-- 多选：trigger 内加 .select-clear 清除全部 -->