gog-textarea

Text Area

A multi-line counterpart to gog-inputfield, sharing its five sizes, error handling and full ControlValueAccessor support.

Overview

Import the component and drop it into a template.

import { TextareaComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [TextareaComponent],
})

Basic usage — a labeled field bound with [(value)]:

Bio

<gog-textarea label="Bio" placeholder="Tell us about yourself" [(value)]="bio" />

Value: ""

Examples

Sizes

Five size steps, from xsm to slg — the same scale as gog-inputfield.

xsm

slg

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

Rows

rows sets the native attribute controlling the field's initial height.

Notes

<gog-textarea label="Notes" [rows]="8" />

Resize handle 21.3.1

resize mirrors the native CSS resize value space — 'vertical' (the default), 'horizontal', 'both', or 'none' to remove the handle entirely. Set it app-wide with GOG_CONFIG.textarea.resize if your forms want one answer everywhere. The grip is drawn by the library rather than the browser, so it follows the theme instead of appearing as a native corner triangle.

Vertical (default)

Both axes

Fixed size

<gog-textarea label="Vertical (default)" [rows]="3" />
<gog-textarea label="Both axes" resize="both" [rows]="3" />
<gog-textarea label="Fixed size" resize="none" [rows]="3" />

Error message

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

Feedback

<gog-textarea
  label="Feedback"
  [(value)]="manualErrorValue"
  [errorMessage]="manualErrorValue().length > 0 && manualErrorValue().length < 10 ? 'At least 10 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.

Comment

<gog-textarea
  label="Comment"
  [formControl]="commentControl"
  errorMessage="At least 10 characters"
  errorDisplay="auto"
/>

Disabled

<gog-textarea 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.

Short note

<gog-textarea label="Short note" [fullWidth]="false" [rows]="2" />

Clearable

The clear button is value-driven: it appears once there is something to clear and vanishes when there isn't, so it adds no permanent chrome. Type into the field below and watch it appear. Also settable app-wide with GOG_CONFIG.control.clearable.

Notes

<gog-textarea label="Notes" [clearable]="true" [(value)]="notes" />

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. Click into each to see it move.

over

<gog-textarea label="in" floatLabel="in" [rows]="2" />
<gog-textarea label="on" floatLabel="on" [rows]="2" />
<gog-textarea label="over" floatLabel="over" [rows]="2" />

API Reference

Inputs

Name	Type	Default	Description
`resize`21.3.1	`'vertical' \| 'horizontal' \| 'both' \| 'none' \| undefined`	`undefined`	Which direction(s) the field's own drag handle resizes it in — the native CSS resize value space, with 'none' removing the handle entirely. Unset, falls back to GOG_CONFIG.textarea.resize, then to 'vertical'.
`readonly`21.3.2	`boolean`	`false`	Blocks edits while keeping the value focusable, selectable and submitted with the form. Also hides the clear button.
`maxlength`21.3.2	`number \| null`	`null`	Native maxlength attribute.
`minlength`21.3.2	`number \| null`	`null`	Native minlength attribute.
`spellcheck`21.3.2	`boolean \| null`	`null`	Native spellcheck attribute. Unset leaves the browser's own default in place.
`value`	`string (model)`	`''`	Two-way bindable value via [(value)]. Also the value Angular Forms drives through writeValue/registerOnChange when used with formControlName/[formControl]/ngModel.
`label`	`string`	`''`	Field label.
`placeholder`	`string`	`''`	Native placeholder text.
`rows`	`number`	`4`	Native rows attribute, controlling the field's initial height.
`errorMessage`	`string`	`''`	Error text to display. Visibility is governed by errorDisplay.
`errorDisplay`	`'auto' \| 'manual'`	`GOG_CONFIG.control.errorDisplay ?? 'manual'`	'manual': shown for as long as errorMessage is non-empty — you decide the timing. 'auto': shown once the attached FormControl is touched and invalid; falls back to manual without one. Settable app-wide, which is what makes 'auto' one decision for a Reactive Forms app rather than per-field boilerplate.
`clearable`	`boolean`	`GOG_CONFIG.control.clearable ?? false`	Adds a clear button. It appears only once the field has something to clear and disappears again when empty, so it adds no permanent chrome.
`clearAriaLabel`	`string`	`'Clear'`	Accessible name for that clear button.
`floatLabel`	`'none' \| 'in' \| 'on' \| 'over'`	`GOG_CONFIG.floatLabel.variant ?? 'none'`	Rests the label inside the field like a placeholder and floats it up on focus or once the field has content. 'in' stays inside the border, 'on' centres on the top border line, 'over' floats fully above it. 'none' keeps the static label-above-the-field layout.
`floatLabelShowPlaceholder`	`boolean`	`GOG_CONFIG.floatLabel.showPlaceholder ?? false`	Reveals the field’s own placeholder once the label has floated out of the way. Off by default, since the resting label already occupies that space.
`name`	`string`	`''`	Native name attribute.
`inputId`	`string`	`''`	id on the native textarea, and target of the label's for attribute.
`disabled`	`boolean`	`false`	Disables the native textarea.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`GOG_CONFIG.control.size ?? 'md'`	Field padding and font size — shares the scale with gog-inputfield.
`fullWidth`	`boolean`	`true`	Fills its container by default. Set false to shrink to content width instead.

Styling Tokens

gog-textarea paints with the same --gog-input-* tokens as gog-inputfield — there's no separate token set to learn. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model.

Token	Description
`--gog-input-label-color`	Field label color.
`--gog-input-field-bg / -field-border / -field-color`	Field surface, border and text.
`--gog-input-radius`	Field corner radius.
`--gog-input-focus-border / -focus-ring / -focus-glow`	Focus state.
`--gog-input-error-color`	Validation error color.
`--gog-input-icon-color / -icon-hover-color`	Prefix / suffix icon color.
`--gog-input-float-label-reserve / -in-top / -on-bg / -over-gap / -over-reserve`	Float-label geometry, derived from the shared --gog-field-float-label-* scale. -on-bg is an instance-layer token (undeclared) — the patch that masks the border behind an "on" label.
`--gog-textarea-clear-icon-ratio`	Size of gog-textarea’s clear glyph relative to the field. A textarea is a large multi-line box, so it takes a full-size glyph rather than the dropdowns’ denser 0.7 ratio.
`--gog-textarea-scrollbar-width`	Instance-layer (undeclared): written by the component from its own measured scrollbar width, so a clear button on a scrolling textarea does not end up under the thumb.