Input Field

Sizes

Five size steps, from xsm to slg.

@for (sizeOption of sizes; track sizeOption) {
  <gog-inputfield [size]="sizeOption" [label]="sizeOption" [placeholder]="sizeOption" />
}

Password

type="password" gets a built-in show/hide toggle for free — the trailing icon and its accessible label switch automatically.

<gog-inputfield label="Password" type="password" [(value)]="password" />

Icons

iconStart / iconEnd take a bare icon name — the genuinely common case, and the whole API for a decorative icon.

<gog-inputfield label="Search" iconStart="info" placeholder="Decorative start icon" />

Addon slots

For anything more than an icon name, project a gogInputAddonStart or gogInputAddonEnd element. Because it takes arbitrary markup, an actionable addon is a real <button> carrying its own aria-label and (click) — nothing has to be threaded through the field.

No icon action yet.

<gog-inputfield label="Amount" [(value)]="amount">
  <span gogInputAddonStart>$</span>
  <span gogInputAddonEnd>USD</span>
</gog-inputfield>

<gog-inputfield label="Search" [(value)]="search">
  <button type="button" gogInputAddonEnd aria-label="Clear search" (click)="clearSearch()">
    <gog-icon name="close" />
  </button>
</gog-inputfield>

These two slots replace six inputs — iconStartTemplate, iconEndTemplate, iconStartFn, iconEndFn, iconStartLabel and iconEndLabel — all deprecated in 21.3.0 and removed in 21.5.0. iconStart and iconEnd stay.

<!-- 21.2.x — three inputs to get one actionable trailing icon -->
<gog-inputfield
  label="Search"
  iconEnd="close"
  iconEndLabel="Clear search"
  [iconEndFn]="clearSearch"
  [(value)]="search"
/>

<!-- 21.3.0 — a real button, with its own aria-label and (click) -->
<gog-inputfield label="Search" [(value)]="search">
  <button type="button" gogInputAddonEnd aria-label="Clear search" (click)="clearSearch()">
    <gog-icon name="close" />
  </button>
</gog-inputfield>

<!-- …or just let the component do it -->
<gog-inputfield label="Search" [clearable]="true" [(value)]="search" />

Clearable

The built-in clear button is value-driven: it appears once there is something to clear and vanishes when there isn't. It replaces the hand-rolled trailing-icon-plus-callback pattern entirely. On a type="password" field the reveal toggle keeps the trailing slot, so the only control that shows the value can never be displaced.

<gog-inputfield label="Search" [clearable]="true" [(value)]="search" />

Float label

floatLabel rests the label inside the field like a placeholder and floats it up on focus or once the field has content. The three variants differ only in where it lands: in stays inside the border, on centres on the top border line, and over floats fully above it. Also settable app-wide through GOG_CONFIG.floatLabel.

<gog-inputfield label="in" floatLabel="in" />
<gog-inputfield label="on" floatLabel="on" />
<gog-inputfield label="over" floatLabel="over" />

Error message

errorDisplay="manual" (the default) shows errorMessage for as long as it's non-empty — you own the timing. Type fewer than 3 characters to see it.

<gog-inputfield
  label="Username"
  [(value)]="manualErrorValue"
  [errorMessage]="manualErrorValue().length > 0 && manualErrorValue().length < 3 ? 'At least 3 characters' : ''"
/>

Reactive Forms

Wire it to a FormControl with [formControl] instead of [(value)]. With errorDisplay="auto", the error only shows once the control has been touched and is invalid — blur the empty field to see it.

<gog-inputfield
  label="Email"
  [formControl]="emailControl"
  errorMessage="Enter a valid email"
  errorDisplay="auto"
/>

Number and date

type="number" accepts min/max/step; wired to a formControl, its value is a real number (null when empty) rather than the raw string [(value)] would give you. type="date" renders the native date picker.

Quantity (number): 1 — Delivery date (string): ""

<gog-inputfield
  label="Quantity"
  type="number"
  [min]="1"
  [max]="10"
  [step]="1"
  [formControl]="quantityControl"
/>

<gog-inputfield label="Delivery date" type="date" [(value)]="deliveryDate" />

Number spin buttons 21.3.1

A type="number" field renders the library's own +/− glyphs instead of the browser's, so they follow the theme and are the same size in every browser. [showSpinButtons]="false" removes them — the field still steps with the arrow keys and the mouse wheel, because that is native <input type="number"> behaviour and unrelated to which glyphs are visible. Set it app-wide with GOG_CONFIG.inputfield.showSpinButtons; incrementLabel/decrementLabel (or GOG_CONFIG.labels) name them for assistive tech.

The third field is worth a look: clearable and the stepper now coexist21.3.2. The clear button sits to the left of the stepper and the gutter widens for the pair. Before that, clearable was silently a no-op on type="number" unless showSpinButtons was also off — so any workaround built around that can go.

<gog-inputfield label="Quantity (stepper)" type="number" [min]="0" [(value)]="quantity" />

<gog-inputfield
  label="Quantity (no stepper)"
  type="number"
  [min]="0"
  [showSpinButtons]="false"
  [(value)]="quantity"
/>

<gog-inputfield
  label="Weight (clearable + stepper)"
  type="number"
  [min]="0"
  [clearable]="true"
  [(value)]="weight"
/>

Disabled

<gog-inputfield label="Disabled" [disabled]="true" value="Read only" />

Auto width

Fields fill their container by default; fullWidth="false" shrinks the field to fit its content instead.

<gog-inputfield label="Zip code" [fullWidth]="false" placeholder="00000" />