Form controls

<GdSelect v-model="lga" :options="[
  { value: 'riverton', label: 'Riverton City Council' },
  { value: 'northbank', label: 'Northbank Regional Council' },
  { value: 'eastvale', label: 'Eastvale City Council' }
]" />

Options that arrive late

<GdSelect v-model="zone" :options="zones" placeholder="Pick a zone" @open="loadZones" />

GdInput

GdInputNumber

GdTextarea

GdSelect

GdSearchSelect

GdHint

• Put every control inside a GdField and let it supply id, describedBy and invalid. Setting those by hand is the path to a form nobody can hear.
• Use sunken for a search field sitting in chrome — a toolbar, a panel head. Leave it off for a field in a form.
• Use readonly, not disabled, for a value the user may want to read or copy. A disabled control cannot be focused to ask about.
• Use GdTextarea only for prose someone will write more than a line of. A long single value is still an input.
• Use @open on the select when assembling the options is expensive, and hold the once-guard in the caller — the component fires on every opening.
• Reach for GdSearchSelect past about twelve options — the point where type-ahead stops helping, because you no longer know the exact word the list is sorted by. Below that a plain select is less machinery for the same job.
• Put a count in the search select's searchPlaceholder — "Search 47 councils…" tells a reader how big the list is before they open it, which is the one fact a trigger showing one value cannot.
• Use keywords for text that should match but not show — a council id, an old name people still type. The alternative is printing the code in the label, which makes every row longer to serve the few who search by it.
• Pass ariaLabel to any select with no visible label. An aria-label written at the call site lands on the wrapper and names nothing.
• Use GdHint for prose about a form; use GdField's hint for prose about a control. The first is read in document order, the second is announced with the field.
• Do not put information in a placeholder. If a placeholder is carrying something the user needs, give the field a real label and a hint instead.

The input sets no width

GdField is a grid, so an input inside one stretches on its own; forcing width: 100% here would stack a filter bar one control per row, and the only fix would be a width override at every call site — which is the same as having no rule. The focus ring moves to the wrapper for the matching reason: the wrapper is what a user sees as the control, and the bare input is only part of it.

Why the unit gets a rule

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.

Why the select is not the browser's

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 ARIA is the combobox-with-listbox pattern implemented in full, because a custom select that loses the native keyboard is a downgrade wearing a skin: arrows move, Home/End jump, type-ahead jumps to the first match, Enter and Space choose, Escape closes and focus returns to the trigger. Past about twelve options the design adds a filter input at the top of the menu. That is GdSearchSelect — a separate component rather than a searchable prop, because three parts of this contract change at once when the filter appears: focus lands in a text field instead of on the listbox, the trigger stops being the element with role="combobox", and typing filters instead of jumping to the first match. A boolean that re-points the keyboard, the ARIA and the meaning of every keystroke is a different component wearing the same name.

Why the search select owns its filtering

GdSearchSuggest deliberately does not filter — a map search hits a geocoder, so the caller owns the results and the component owns presentation and the keyboard. In a search select the options ARE the data, so matching them is the component's job: a caller that has to filter its own array to feed a "searchable" select has been handed a search box that does nothing. That is the line between the two. If the matching is not yours to do, it is GdSearchSuggest.

The active row is scrolled into view, which GdSelect does not do. aria-activedescendant moves the highlight without moving focus, and a browser only auto-scrolls what it focuses — so on a list long enough to need a filter, ArrowDown walks the highlight straight out of the visible box unless the component scrolls it back. At twelve options that rarely shows; past twelve it is the first thing you hit.

@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. 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.

Why the hint has no id

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.