Select

Built on Base UI Select, and consumes its API natively:

value is generic
onValueChange receives (value | null, eventDetails)
Select.Value resolves the selected item’s label from the items prop on Select.Root

Installation

import { Select } from "@o/pipeline/experimental/components/select";

Default

Pass items to Select.Root so Select.Value renders the selected item’s label; without it, the raw value is rendered.

With descriptions and icons

`placeholder`

Rendered by Select.Value while no value is selected.

Custom trigger

Select.Trigger renders a Button and accepts its props. Pass render to opt out of the default button (including its caret) and supply a completely different trigger element: see FilterChip in the web app for a real example.

Long lists

Lists scroll inside the popup (capped at half the viewport by default, bounded by the available height below the trigger); scroll arrows appear automatically at whichever edge has more items.

`alignItemWithTrigger`

By default the popup is anchored below the trigger. Pass alignItemWithTrigger on Select.Content to overlap the trigger instead, with the selected item aligned to the trigger text (only applies to mouse input, and is disabled automatically when there is not enough space).