Forms

Stable - @kikita-labs/ui v2.0.0

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 { KuiTextarea } 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>

Provider defaults

Set defaults.textarea once for the application or for a subtree. Each option resolves as local input > defaults.textarea.<option> > built-in default.

import { provideKikitaUi } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideKikitaUi({
      defaults: {
        textarea: {
          /* options below */
        },
      },
    }),
  ],
};
NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' — Component size. Takes precedence over the global defaults.size.

Theming tokens

Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.

NameTypeDefaultDescription
--kui-textarea-padding-blockCSS custom property--kui-space-3Padding, block

API

Inputs verified against @kikita-labs/ui v2.0.0 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' | undefinedundefinedTextarea height and spacing size, mapped to Kikita UI control tokens. Resolved from defaults.textarea.size, then the parent field, then the global defaults.size, then md.
invalidbooleanfalseMarks the textarea invalid outside a kui-field error state. With [formField] the Field state wins.
idstring | undefinedundefinedExplicit id override. Inside kui-field, the field id is used when omitted.
KuiTextareaOptionsinterface-Shape of defaults.textarea: size.

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.
  • A required kui-field exposes aria-required on the textarea.
  • Native rows, cols, and maxlength attributes work as usual.

Migrating to 2.0

Consumer-visible changes of @kikita-labs/ui 2.0 for Textarea.

  • The directive class is KuiTextarea; the Directive suffix is gone.
  • The default size moved to provideKuiDefaults({ textarea: { size } }); the input is now undefined until set.
  • A required kui-field sets aria-required on the textarea.
  • The block padding has --kui-textarea-padding-block.