ABBA UIv0.1.0
Forms

Textarea

A multi-line text field.

Client component1 export

The multi-line counterpart to Input. `autoSize` grows the control with its content using CSS `field-sizing` rather than measuring scrollHeight in an effect, so there is no layout thrash and it is correct on first paint.

Import

import { Textarea } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/textarea.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Default and auto-sizing

<Stack gap={3}>
  <Textarea aria-label="Notes" placeholder="Write a note…" />
  <Textarea aria-label="Auto" autoSize placeholder="This one grows as you type" />
</Stack>

Props

Textarea props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
invalidbooleanfalseMarks the field as failing validation.
resize"none" | "vertical" | "both""vertical"Resize affordance offered to the user.
autoSizebooleanfalseGrow to fit content via CSS field-sizing.

Accessibility

  • The invalid state sets `aria-invalid`.
  • Avoid `resize="none"` unless the layout genuinely cannot tolerate it — it removes a real user affordance.