Skip to content
Docs Prototypes Whitepaper

Select

Select base prototype

base-select is a cataloged select-only compound prototype and the first Base family to formally define a value-class presentation part.

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

It follows the APG select-only combobox pattern: Trigger projects combobox, Content projects listbox, and Item projects option. The committed selection is persistent state; the active item while open is transient navigation state.

Family Parts

Section titled “Family Parts”
  • select-root: owns controlled/uncontrolled open, value, and textValue, and arbitrates change requests
  • select-trigger: an independent command surface that projects combobox ARIA and handles keyboard/pointer opening
  • select-value: renders displayValue or placeholder through explicit run.update() without owning input behavior
  • select-content: composes asOverlay, asTransition, asFocusRoving, and anchor positioning
  • select-item: projects an option, separates transient active from persistent selected, and submits selection requests

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
  • pointer and select-only keyboard interaction, including arrows, Home/End, and typeahead
  • Escape, Tab, outside-press dismissal, and appropriate focus restoration
  • selected-item focus entry, with boundary fallback
  • combobox/listbox/option ARIA relationships and selected state
  • controlled values that emit requests without creating temporary success state
  • a protocol-owned value presentation part

It does not yet include:

  • form semantics
  • native <select> parity
  • editable combobox/search behavior
  • Group, Label, Separator, Viewport, and scroll buttons
  • form submission and hidden inputs
  • multi-select

References

Section titled “References”