Form controls

Checkbox

Indeterminate and the strong emphasis exist; strong is for a checkbox on white, where the subtle outline all but disappears.

Select button

Three variants: solid, tinted, track. The grid/list switch on an index page is track.

Select

Single choice. Add a search inside the panel with one input rather than a different component.

Configured: the navbar location picker

A pill trigger with a map-pin template, a panel header, and rows carrying a type badge. Nothing bespoke — the same lib-select as above.

Multi-select

Search is on by default here, unlike the single select, and a 24px select-all checkbox sits beside it in the panel header — no visible label, so it needs one in a design that shows the panel. Chip mode shows at most two chips before collapsing to a count; comma mode lists three. That one-item difference is inherited behaviour we kept deliberately, so design for the count appearing at the third selection.

Configured: the chart aspect picker

The same control as a labelled form field — small, full width, plain rows, no panel header. While the options load it is replaced by a skeleton rather than shown empty, which is the pattern for any select fed by a request.

Text input

Colour picker

A native colour input, hex only. The swatch panel is the browser's and the operating system's, so it cannot be designed or restyled -- design the trigger, not the picker.

Picklist

Click to select then move, or double-click. Deliberately no drag-and-drop and no within-list reordering: a design showing drag handles or up/down arrows is asking for new work. Each list scrolls at 14rem.

Badge and skeleton

A skeleton stands in for content that is loading. Every list needs one designed, or it flashes empty.