Textarea

Native multi-line text input with invalid, disabled, RTL, and Field composition support.

01 Hero Preview

Grid: 8px · Scale: 1:1

Release summary Draft

Use textarea inputs when the content should stay multi-line and editable in place.

02 Usage

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { FrFieldModule } from '@frame-ui-ng/components/field';
import { FrTextareaModule } from '@frame-ui-ng/components/textarea';

summaryControl = new FormControl(
  'Northwind now supports shared rollout planning and reusable release notes.',
  { nonNullable: true },
);

HTML

<div frField>
  <label frFieldLabel for="release-summary">Release summary</label>

  <div frFieldContent>
    <textarea
      frTextarea
      id="release-summary"
      rows="4"
      [formControl]="summaryControl"
    ></textarea>

    <p frFieldDescription>
      Use textarea inputs when the content should stay multi-line and editable in place.
    </p>
  </div>
</div>

03 Examples

Basic textarea

Use a textarea when the content is multi-line by nature and people should be able to review or edit it directly in the form.

Component Sheet

Grid: 8px · Scale: 1:1

Team notes

Capture longer internal context without forcing the content into a single-line input.

Invalid with reactive forms

Reactive forms can drive the invalid state directly, so the textarea border and validation text stay synchronized with Angular validation.

Component Sheet

Grid: 8px · Scale: 1:1

Announcement message

Delete the value to see the reactive invalid state update from Angular forms.

Readonly and disabled

Readonly and disabled textareas keep the same multi-line structure while clearly changing whether the content can be edited.

Component Sheet

Grid: 8px · Scale: 1:1

Readonly launch brief

FrameUI release brief: finalize the theming guide, confirm token coverage, and publish the migration notes.

Readonly textareas preserve scrollable content while preventing edits in this context.

Disabled incident response note

Disable the textarea when the content is managed somewhere else or blocked by policy.

04 Custom Styling

Override textarea tokens on a local wrapper when a form section needs a taller writing surface, different resize behavior, or a more branded focus treatment without changing the composition.

Component Sheet

Grid: 8px · Scale: 1:1

Internal release memo Team

This preview applies local height, radius, focus-ring, padding, and helper-text overrides.

05 Token Inspector

Hover the field wrapper, label, badge, textarea surface, description, or error text to inspect the tokens that shape the multi-line control and its supporting layout.

Workspace welcome message Live

Inspect the field wrapper, label, badge, textarea surface, helper text, and error messaging.

06 Design Tokens

Use these CSS custom properties to tune textarea height, padding, resize behavior, borders, focus treatment, and invalid styling without changing the primitive structure.

SCSS


  --frame-textarea-root-min-height: 5rem;
  --frame-textarea-root-radius: var(--frame-radius-md);
  --frame-textarea-root-bg: var(--frame-surface);
  --frame-textarea-root-color: var(--frame-surface-foreground);
  --frame-textarea-root-border: var(--frame-border);
  --frame-textarea-root-font-size: 0.875rem;
  --frame-textarea-root-padding-block: 0.625rem;
  --frame-textarea-root-padding-inline: 0.875rem;
  --frame-textarea-root-placeholder-color: var(--frame-muted-foreground);
  --frame-textarea-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
  --frame-textarea-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
  --frame-textarea-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
  --frame-textarea-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
  --frame-textarea-root-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
  --frame-textarea-root-disabled-opacity: 0.55;
  --frame-textarea-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
  --frame-textarea-root-transition-duration: 150ms;
  --frame-textarea-root-resize: vertical;