Selection + Command

The selection family covers portal-based choice controls and in-page command palettes: Select, Combobox, and Command. Select and Combobox share the same control sizing and focus treatment as buttons and inputs (Control sizing (VUEDA canon) tokens.css-token:vueda-control-height, 2 px focus ring at 2 px offset). Command is an inline surface with no portal and sizes itself to its content.

This page is the visual contract the default theme guarantees. Use it as the target spec when you re-skin: every cell shown here should still read as the same control after a customization, even if its color, radius, or density shifts. If a cell breaks, the change has crossed from skin into design language.

For the mechanics of overriding any of this, see Customize VUEDA Appearance. In brief: values (color, dimension, duration) belong in CSS tokens; compositions (class arrangements, state recipes) belong in theme keys.

Every cell below is a live component, open panels included. Open the Select anatomy panel with its trigger; it locks page scrolling while open and releases it when dismissed. The Combobox open-list cells force-mount real panels in reserved space beneath their triggers. Because those panels are positioned by floating-ui they cannot sit in normal grid flow, which is why they get their own reserved column rather than a grid cell.

Select: state matrix

Select is a portal-based choice control backed by Reka UI's SelectRoot state machine. The trigger is the only visible element in the closed state; it inherits the same hairline border, control height, and focus treatment as buttons and inputs. The content panel renders in a portal.

Theme keys: SelectTrigger, SelectContent, SelectItem, SelectLabel, SelectSeparator. Token surface: Color palette: light tokens.css-token:border (trigger stroke), Color palette: light tokens.css-token:ring (focus outline), Color palette: light tokens.css-token:destructive (invalid outline), Color palette: light tokens.css-token:popover (content fill), Color palette: light tokens.css-token:accent (highlighted item fill).

Combobox

Combobox is a "Select with search" backed by Reka UI's ComboboxRoot state machine. The anchor shows the selected value (or placeholder) as a button-shaped trigger; clicking opens a portal-rendered ComboboxList with a ComboboxInput search row at the top, followed by filtered ComboboxItem options. The item filtering is built in and updates as the user types.

The practical implementation is WidgetCombobox, which wires up the full trigger/list/search/items composition and connects to a VUEDA field context. The raw primitives shown here are the building blocks it composes from.

Theme keys: ComboboxList, ComboboxInput, ComboboxItem, ComboboxGroup, ComboboxEmpty, ComboboxSeparator, ComboboxItemIndicator.

Command

Command is an inline command palette that renders its full tree in-place with no portal. It is built on Reka UI's ListboxRoot + ListboxFilter primitives and provides its own filter context (useCommand) so groups and items can self-hide based on the current search term. Items disappear when their text content does not match the filter; groups disappear when all their items do.

For a modal variant, wrap Command in CommandDialog, which opens it inside a Dialog. The dialog header is sr-only so the title and description props are accessible without visual duplication.

Theme keys: Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandShortcut, CommandEmpty, CommandSeparator, CommandFooter, CommandDialog.