FORMA Docs

Textarea

A multiline field for notes, descriptions, and longer text.

import { Textarea } from "@/forma/arc/textarea/textarea";
Base

In FORMA

  • Liegt in kit/arc/textarea und ist über @/forma/arc/textarea/textarea erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
  • Das Kit nutzt ihn als Textarea aus @/forma/ui/textarea — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

  • Free-form multi-line text like bios, comments, or feedback.
  • Fields with a live character count, which rolls its digits in the helper row.

When not to use

  • Use input for single-line values.
  • Use inline-edit with multiline for a description edited in place on a page.
  • Use tag-input when the text is really a list of short values.

Usage

import { Textarea } from "@/forma/arc/textarea/textarea";

export function BioField() {
  const [bio, setBio] = useState("");
  return (
    <Textarea
      label="Bio"
      rows={4}
      value={bio}
      onChange={(event) => setBio(event.target.value)}
      description={`${280 - bio.length} characters left`}
    />
  );
}

API reference

Textarea

A labelled multi-line field with the same animated helper and error rows as Input.

PropTypeDefaultDescription
label (required)string–Visible label, tied to the textarea with htmlFor.
descriptionstring–Helper copy under the field, linked through aria-describedby. Counts such as "120 characters" roll their digits.
errorstring–Error copy. Sets aria-invalid and renders in a role="alert" row.
...propsTextareaHTMLAttributes<HTMLTextAreaElement>–Forwarded to the native textarea, including ref, rows, value, onChange, and maxLength.

Accessibility

  • Native textarea with a real label.
  • Description and error ids are merged into aria-describedby; errors set aria-invalid and use role="alert".
  • Animated copy is aria-hidden and mirrored in a visually hidden plain-text span.

Motion

  • Message rows open their height on a smooth spring; changed words rise in with a soft blur and counts roll only the digits that changed.
  • Reduced motion drops the roll, blur, and height spring for instant changes.

Responsive behavior

  • It fills its column with a 110px minimum height and a vertical resize handle; it does not auto-grow with content.
  • Hover border styles apply only on hover-capable fine pointers.

Performance

  • One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
  • Recomputing a character count on each keystroke only re-renders the helper row words that changed.

Notes for AI

  • Use for free-form, multi-line text. Use input for single lines and inline-edit for text edited in place on a page.
  • A live character count in description gets the rolling-digit treatment for free.

Also in text fields

Guidance for AI tools

Textarea: A multiline field for notes, descriptions, and longer text. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückInputWeiterSelect

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.