operate ˗ˏˋ design ˎˊ-

© 2025 Operate Machine, Co.

Choice

Primitives

import * as Choice from "@o/pipeline/components/choice";

At its core, Choice is a combobox select component

Multiple Choice

With ChoiceCreate

With showSearchValue on ChoiceCreate

Composition

With DropdownMenu

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

See DropdownMenu 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”

Either use:

  1. ChoiceTrigger — to take care of rendering a button with the selected item content
  2. ChoiceSelected — to access the currently selected item for rendering a custom trigger

Bespoke Trigger

Through composition, you have full control over the trigger contents

Popover Size

  • max (default)
  • sm
  • md

Popover Content Alignment

Align on the bottom so a user can quickly move to the next Choice

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

List

Precomposed Components

Pre-configured Choice components for common use cases.

Choice

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

ChoicePopover

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

MultiChoice

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

MultiChoicePopover

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