Select

This entry composes the shadcn visual and API surface over the cataloged Base Select protocol. Web Components, React, and Vue share the same selection, focus, and ARIA semantics.

• Root, Trigger, Value, Content, Item, Surface, Viewport, ItemText, Group, Label, and Separator
• defaultValue / value, defaultOpen / open, and their change events
• Trigger.size="sm | default"
• Trigger.appearance="default | ghost"
• Content.position="item-aligned | popper", defaulting to shadcn/ui’s item-aligned
• single selection, disabled items, keyboard navigation, typeahead, popup dismissal, and focus restoration

Group is a passive option container; its Label names only that group. Multiple groups and ungrouped items can coexist without changing selection order. Separator is decorative and contentless. The grouped demo uses these real parts. Their visual recipe is pinned to shadcn/ui revision 02cad611.

The full Surface → Viewport → Item → ItemText composition supplies explicit parts for item-aligned positioning; legacy compositions and explicit popper remain supported. This does not establish complete Radix positioning parity. Scroll buttons, ItemIndicator, and form submission remain open. GPUI peer group-name relationships have transport evidence, but its current wire format omits the Separator’s hidden-tree contribution; native accessibility acceptance remains unverified.

appearance="default" keeps the bordered field surface shown above. appearance="ghost" is an opt-in Proto UI presentation extension with a transparent resting border/background and no resting shadow. Hover and press use the accent surface; the visible keyboard focus ring and disabled behavior remain. Set this prop on shadcn-select-trigger, not Root or Content. Removing it restores default, including during interaction. This changes only presentation over Base Select Trigger, not selection, keyboard navigation or popup behavior.