Skip to content
Docs Prototypes Whitepaper

Select

Select base prototype

base-select is the current base-library probe for value-class components.

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

Unlike dropdown, this family does not stop at open/close plus active-item coordination. It also includes a dedicated select-value part, which keeps selected text presentation inside the protocol boundary.

Family Parts

Section titled “Family Parts”
  • select-root: owns open, value, and textValue
  • select-trigger: opens and closes the popup surface
  • select-value: renders the selected text or placeholder
  • select-content: owns overlay entry, dismissal, and focus entry
  • select-item: contributes value / textValue snapshots and commits selection

Why It Matters

Section titled “Why It Matters”

This family is not only an addition to the base library. It is also a probe for Proto UI’s current value-component path:

  • selected value text is defined by the prototype family itself
  • the host app does not have to render that text manually
  • value presentation can be refreshed through explicit update-driven re-render

That makes select-value a concrete render-consumed-value sample instead of a purely exposed-state sample.

Current v0 Boundary

Section titled “Current v0 Boundary”

base-select currently includes:

  • single selection
  • popup open/close coordination
  • selected item focus entry
  • selected text synchronization
  • a protocol-owned value presentation part

It does not yet include:

  • form semantics
  • native <select> parity
  • combobox/search behavior
  • grouped options
  • multi-select

References

Section titled “References”