Select

Select 基础原型

base-select 是一个已经编目的 select-only 复合原型，也是 base 原型库里首个正式定义 value 类呈现部件的 family。

<wc-base-select-root class="relative inline-flex flex-col gap-2">
  <wc-base-select-trigger class="inline-flex min-w-56 items-center justify-between gap-3 rounded-md border bg-white px-3 py-2 text-sm shadow-sm cursor-pointer select-none">
    <wc-base-select-value placeholder="Pick a framework"></wc-base-select-value>
    <span class="text-slate-400">▾</span>
  </wc-base-select-trigger>

  <wc-base-select-content class="w-56 rounded-md border bg-white p-1 shadow-lg">
    <wc-base-select-item value="react" textValue="React" class="block rounded px-3 py-2 text-sm cursor-pointer">
      React
    </wc-base-select-item>
    <wc-base-select-item value="vue" textValue="Vue" class="block rounded px-3 py-2 text-sm cursor-pointer">
      Vue
    </wc-base-select-item>
    <wc-base-select-item value="wc" textValue="Web Components" class="block rounded px-3 py-2 text-sm cursor-pointer">
      Web Components
    </wc-base-select-item>
  </wc-base-select-content>
</wc-base-select-root>

View code

它使用 APG select-only combobox 语义：Trigger 投影 combobox，Content 投影 listbox，Item 投影 option。选中值是持久状态；打开后的 active item 是瞬时导航状态，两者不会混为一谈。

Family Parts

select-root：持有受控/非受控 open、value、textValue，并裁决变更请求
select-trigger：独立 command surface，投影 combobox ARIA，并负责键盘/指针开合
select-value：通过显式 run.update() 渲染 displayValue 或 placeholder，不拥有输入行为
select-content：组合 asOverlay、asTransition、asFocusRoving 与锚点定位
select-item：投影 option，区分瞬时 active 与持久 selected，并提交选择请求

为什么它重要

这个 family 不只是为了扩充 base 库，还承担了一次 value 类组件的实践验证：

选中值文本由原型 family 自己定义
宿主应用不需要手动渲染这段文本
value 呈现可以通过显式 update 驱动重渲染完成刷新

因此，select-value 是一个明确的 render-consumed-value 样本，而不只是 exposed-state 样本。

当前 v0 边界

base-select 目前包含：

单选语义
鼠标与 select-only 键盘交互，包括方向键、Home/End 与 typeahead
Escape、Tab、外部点击关闭及所需的焦点恢复
打开后优先聚焦 selected item，否则从边界项开始
combobox/listbox/option 的 ARIA 关系和选中状态
受控值只发送请求、不制造临时成功状态
family 内部自带的 value 呈现部件

它暂时不包含：

表单语义
原生 <select> 等价行为
可编辑 combobox / 搜索能力
Group、Label、Separator、Viewport 与滚动按钮
表单提交与 hidden input
多选

Select

Family Parts

为什么它重要

当前 v0 边界

References