Choice

A combobox for selecting one or many options, with single, multiple, and popover-based variants.

Primitives

import { Choice } from "@o/pipeline/experimental/components/choice";

At its core, Choice is a combobox select component

With a destructive item

Choice.Item accepts an intent="danger" prop for destructive actions.

Long lists

Choice is built on Base UI Autocomplete and filters with a cheap binary substring match, so hundreds of statically rendered items (e.g. timezone-choice, person-multi-choice in apps/web) stay responsive without any special handling.

For very large or remote datasets, don’t reach for Choice — Base UI supports native virtualization via the virtualized prop on its Autocomplete/Combobox roots paired with a windowing library. CommandMenu (../command-menu/command-menu.tsx) is the in-repo reference for that pattern (virtualized + @tanstack/react-virtual + Autocomplete.useFilteredItems); the pipeline Combobox is the long-term home for fetch-as-you-type flows.

Multiple Choice

With ChoiceCreate

With showSearchValue on ChoiceCreate

Composition

With Menu

Choice can be used within Menu.SubContent to allow for item selection within a dropdown menu

See Menu documentation for more information.

With Popover

Behavior

• When selecting a single item, the Popover should close after selection
• For most cases, the Popover should align to the start of the trigger on the bottom edge.

Creating a “trigger”

Use Choice.Trigger to render a button with the selected item content.

Bespoke trigger

Through composition, you have full control over the trigger contents

Popover size

Popover content alignment

Align on the bottom so you can move to the next Choice

Align on the side (either right or left depending on space available)

Precomposed components

Pre-configured Choice components for common use cases.

SingleChoice

import { SingleChoice } from "@o/pipeline/experimental/components/choice/precomposed";

ChoicePopover

import { ChoicePopover } from "@o/pipeline/experimental/components/choice/precomposed";

clearable

MultiChoice

import { MultiChoice } from "@o/pipeline/experimental/components/choice/precomposed";

MultiChoicePopover

import { MultiChoicePopover } from "@o/pipeline/experimental/components/choice/precomposed";