Select

Built on Base UI Select, and consumes its API natively: value is generic, onValueChange receives (value | null, eventDetails), and 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.

Sans serif

placeholder

Rendered by Select.Value while no value is selected.

Choose a font

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.

Serif

Long lists

Lists scroll inside the popup (capped at max-h-96 by default); scroll arrows appear automatically at whichever edge has more items.

Option 1

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

Monospace

disabled

Sans serif