Skip to content
v1.0
Components

Field

The wrapper that puts a label, a hint and an error around one control and does the ARIA wiring between them.

Anatomy

The address as the council records it.

Code 
<GdField v-slot="f" label="Street address" hint="The address as the council records it.">
  <GdInput v-bind="f" v-model="address" />
</GdField>

<GdField v-slot="f" label="Local government area" required>
  <GdSelect v-bind="f" v-model="lga" :options="councils" />
</GdField>

<GdField v-slot="f" label="Lot / plan" :error="err">
  <GdInput v-bind="f" v-model="lotplan" />
</GdField>

API

Props

PropTypeDefault
labelstring—

The visible label, wired to the control by a generated id. Omit it only when something else names the control.

hintstring—

Helper text under the control. Named in `aria-describedby`, and hidden while an error is showing.

errorstring—

The message. Its PRESENCE is the invalid state — there is no separate `invalid` boolean. Carries `role="alert"`, so it is announced when it appears.

requiredboolean—

Draws the required mark, which carries a text alternative — a bare asterisk means nothing to a screen reader.

Slots

default

The control. Scoped: it receives `{ id, describedBy, invalid }` — spread them onto the control with `v-bind="f"`.

Usage Guidelines

  • Wrap every control that needs a label in a GdField and spread the slot props onto it. That is the whole contract: v-slot="f" on the field, v-bind="f" on the control.
  • Use hint for standing guidance that belongs to this control. It is named in aria-describedby, so it is read with the field rather than hunted for.
  • Use GdHint instead when the sentence explains a form, a section or a card rather than one control. A free-standing paragraph joins no describedby chain.
  • Set error to turn the field invalid. There is no invalid prop to set alongside it — the message is the state.
  • Do not show a hint and an error at once. The component already suppresses the hint; do not work around it. Once something is wrong, the correction is the only thing worth reading.
  • Use required rather than an "Optional" convention on GRIDD's forms. On a form where most fields are required, marking the optional ones produces more noise than it removes.

Behavior & Anatomy

The wiring

A generated id links the label to the control, and aria-describedby names the hint AND the error together so a screen reader reads both. 

<GdField v-slot="f" label="Lot / plan" :error="err"> <GdInput v-bind="f" v-model="lotplan" /> </GdField> // f is { id, describedBy, invalid }

Doing that by hand at every call site is how a form ends up with a visible error that assistive technology never announces. The error also carries role="alert", so a validation failure is announced when it appears rather than only when focus happens to land on the field.

A grid, not a stack of margins

The field lays itself out as a grid so the control stretches on its own, which is what lets GdInput set no width at all. An input that forces width: 100% stacks a filter bar one control per row, and the fix is a width override at every call site — which is the same as having no rule.

Required, hint and error

The required mark carries a text alternative, because a bare asterisk means nothing to a screen reader. "Optional" would be the better convention in general, but on a form where most fields are required it produces more noise than it removes.

A hint and an error are never shown at once: once something is wrong, the correction is the only thing worth reading.

Navigate

Esc