Select

A form control for choosing a predefined value in a dropdown. Prefer Combobox when the list is long enough to filter. The trigger matches Input: no border, a color wash unless inline, and a lightness shift on hover and focus. A highlighted option shows the accent dot. The trigger and options are Regular. Group labels are Light.

Anatomy

<UiSelectRoot :items="apples">
  <UiSelectLabel>Apple</UiSelectLabel>
  <UiSelectTrigger>
    <UiSelectValue placeholder="Select apple" />
    <UiSelectIcon />
  </UiSelectTrigger>
  <UiSelectPortal>
    <UiSelectPositioner>
      <UiSelectPopup>
        <UiSelectList>
          <UiSelectItem value="gala">
            <UiSelectItemIndicator />
            <UiSelectItemText>Gala</UiSelectItemText>
          </UiSelectItem>
        </UiSelectList>
      </UiSelectPopup>
    </UiSelectPositioner>
  </UiSelectPortal>
</UiSelectRoot>

Parts

• Root — owns value / open. Pass items as { label, value }[]. Typeahead matches labels.
• Label — accessible name for the trigger.
• Trigger / Value / Icon — the closed field. Arrow keys and Enter open the list.
• Portal / Positioner / Popup — below the trigger. Esc and outside click close.
• List / Item — role="listbox" / option. data-selected and data-highlighted.
• ItemIndicator / ItemText — check and label.
• Group / GroupLabel / Separator — optional grouping.