Select

Select 基础原型

base-select 是当前 base 原型库里用来验证 value 类组件路径的核心探针。

<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>

它与 dropdown 的区别在于，协议边界不只停在开合与 active-item 协作，还会把一个专门的 select-value 部件留在 family 内部，用来承接“当前选中值文本”的正式呈现。

Family Parts

select-root：持有 open、value、textValue
select-trigger：负责打开和关闭弹出层
select-value：渲染当前选中值文本或 placeholder
select-content：负责浮层进入、关闭与焦点进入
select-item：提供 value / textValue snapshot，并提交选中结果

为什么它重要

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

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

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

当前 v0 边界

base-select 目前包含：

单选语义
弹层开合协作
打开后优先聚焦当前 selected item
选中值文本同步
family 内部自带的 value 呈现部件

它暂时不包含：

表单语义
原生 <select> 等价行为
combobox / 搜索能力
分组 options
多选

Select

Family Parts

为什么它重要

当前 v0 边界

References