Forms

Stable - @kikita-labs/ui v1.6.1

Textarea

Textarea keeps the control native and applies Kikita UI multiline styling through the kuiTextarea directive.

Import

Import the public textarea primitive from the package entrypoint.

textarea.ts
import { KuiTextareaDirective } from '@kikita-labs/ui';

Usage

Open in Playground

Use kuiTextarea on a native textarea element. Use Field when the control needs label, hint, or error chrome.

Internal project note

<div class="basic-textarea-example">
  <kui-field label="Notes" hint="Internal project note">
    <textarea kuiTextarea rows="4" placeholder="Write a note"></textarea>
  </kui-field>
</div>

Sizes

size sets textarea height and spacing using the same data-kui-size tokens as other Kikita UI controls. Control height comes from size, not from data-kui-density.

<div class="textarea-size-example">
  <label class="textarea-size-example__option">
    <span>Extra small</span>
    <textarea kuiTextarea size="xs" rows="2" placeholder="Extra small"></textarea>
  </label>
  <label class="textarea-size-example__option">
    <span>Small</span>
    <textarea kuiTextarea size="sm" rows="2" placeholder="Small"></textarea>
  </label>
  <label class="textarea-size-example__option">
    <span>Medium</span>
    <textarea kuiTextarea size="md" rows="2" placeholder="Medium (default)"></textarea>
  </label>
  <label class="textarea-size-example__option">
    <span>Large</span>
    <textarea kuiTextarea size="lg" rows="2" placeholder="Large"></textarea>
  </label>
</div>

Invalid state

A kui-field error message infers invalid state on a projected textarea. Use the invalid input directly when the textarea is not inside a field.

Standalone invalid state outside field error wiring

<div class="textarea-invalid-example">
  <kui-field label="Summary" error="Summary must be at least 20 characters" required>
    <textarea kuiTextarea rows="3" placeholder="Describe the change"></textarea>
  </kui-field>

  <kui-field label="Notes" hint="Standalone invalid state outside field error wiring">
    <textarea kuiTextarea invalid rows="3" placeholder="Write a note"></textarea>
  </kui-field>
</div>

Signal Forms

Bind Angular Signal Forms [formField] directly on the native textarea. kuiTextarea owns visual styling and ARIA description wiring; Signal Forms owns value, disabled, touched/dirty state, and validation.

textarea-signal-forms-example.html
<kui-field label="Description" hint="Short project description">
  <textarea kuiTextarea [formField]="profileForm.description"></textarea>
</kui-field>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'Textarea height and spacing size, mapped to Kikita UI control tokens.
invalidbooleanfalseMarks the textarea invalid outside a kui-field error state.
idstring-Explicit id override. Inside kui-field, the field id is used when omitted.

Accessibility

Keep native textarea semantics. Add labels through Field or a native label element.

  • Use a visible label through kui-field or a native label.
  • Use invalid only when the textarea is outside field error wiring.
  • When projected inside kui-field, the field reads the descendant [formField] and infers the required marker and first error message from Angular Signal Forms metadata.
  • Native resize behavior (the drag handle in the bottom-right corner) is preserved by default. kuiTextarea does not control or restrict resize; override it with the CSS resize property when a fixed size is required.
  • Native rows, cols, and maxlength attributes work as usual.