Skip to content
Components

Form controls

Input, textarea and select. The focus ring moves to the wrapper, because the wrapper is what a user sees as the control — the bare input is only part of it.

Input

GdInput deliberately sets NO width. GdField is a grid, so an input inside one stretches on its own; forcing 100% here stacked a filter bar one control per row in v1, and the fix was a width override at every call site — which is the same as having no rule.

Units & glyphs

A unit is separated by a rule rather than by spacing, because "600 m²" reads as one value and "600 | m²" reads as a value and its unit, which is what it is.

Textarea

Vertical resize only — horizontal resize breaks the measure rule and lets a user drag prose past 68 characters.

Select

A native select with the chevron drawn over it.

The menu is the SYSTEM's — selected row in the accent wash with a check — so it obeys the tokens and the theme, which the operating system's popup does not. The keyboard is the full combobox contract: arrows, Home/End, type-ahead, Enter, Escape. Past about twelve options the design adds a filter input at the top of the menu; that searchable variant is still a separate component, tracked in the gap register.

Options that arrive late

@open fires when the listbox opens, so a caller whose options are expensive to assemble can hang that work off the first opening instead of preloading everything — or reaching inside the component for its state.

Live — open it. The emit fires on EVERY opening, not only the first: the once-guard belongs to the caller, which is the only party that knows whether the data has gone stale. It is emitted from the open watcher rather than from the click handler, so ArrowDown and a click count the same, and a call that finds the menu already open counts for nothing.

Hint

Helper prose with no control attached — the sentence under a form, beside a heading, at the foot of a card. GdField already renders the hint that belongs TO a control; this is the other half of the job.

We'll email a six-digit code. It expires in ten minutes.

Signing in accepts the terms of use.

This council has not published its overlays yet.

quiet steps the SIZE down rather than the colour. The next ink below ink-muted is 3.29:1 and fails AA at caption size, so the loudness comes off in scale and the contrast stays where it is.

danger matches GdField's error exactly, so a standing warning and a field's own validation read as one voice. It is still prose, not a live region — a message that appears in answer to a submit belongs in GdField or GdBanner, which announce it. Without this component the sentence becomes a local .field-hint in every app, each one a slightly different grey.

Navigate

Esc