Component gallery

Menus and pickers

Five ways to open a list and pick from it, each with its job. Several components for one purpose is fine; confusion about which is which is the mess.
Several components for one purpose is fine
The kit has five ways to open a list and pick from it because the apps have five different jobs for one. What would be a mess is not knowing which is which, so each row below says what the thing is, when to reach for it, and when not to. The ruling behind this page is doc 53 §R (owner, 2026-08-16); the Select gap it closes is doc 52.

Dropdown

A positioning primitive: a trigger, a floating panel, one gesture that opens it. It knows nothing about lists or values.
Reach for it
When the panel is not a pick at all: a row's kebab menu, a hover card, a small form under a button.
Not for
As a value picker. If the panel's job is to hand a value back, that is Select.

Select, single

One value in, one value out; keyboard-navigable, type-to-filter on long lists, closes on pick.
Reach for it
A form field or a toolbar control whose answer is exactly one thing: an owner, a taxonomy, a page size.
Not for
For a set of values (that is multiple), or for navigation (that is a Dropdown of links).

Select, multiple

The same control with an array in and the whole next array out; the panel stays open while you pick, and the closed control leads with the property word ("Owner · 2").
Reach for it
A toolbar facet or a form field that takes several values, especially where the applied set must stay readable when closed.
Not for
As a replacement for FacetBar when there is more than one facet with counts, chips, and a refresh; that composition is the bar's job.

FacetBar

The list toolbar's filter row: several standing facets (Select multiple or single under the hood), applied chips, a count, an optional refresh, all in one bar.
Filter
Module: Extract
1 applied
Reach for it
Above any table or list that filters on more than one property. Both apps ship it on their job and part lists.
Not for
For a single field in a form. One facet alone is a Select.

Split button

A Button with a caret joined to its main action; the caret opens a floating panel of related actions.
Reach for it
When one action is primary and its variants are secondary: Export as CSV or JSON, Run or Run with options.
Not for
As a picker that stores a value; the panel is actions, not state.

Command palette

A modal search over everything the app can navigate to, opened from a topbar trigger or the keyboard.
Reach for it
App-wide navigation and search: the playground's Cmd-K, an app's jump-to-record.
Not for
As a form control or a filter; it navigates, it does not pick a value into a field.
@versable-git/ui · all states, both themes