Text Area

Overview

TextArea is the shared multi-line text field used for notes, descriptions, summaries, and longer freeform input.

It composes:

Use it the same way you would use Input, but when the content should span multiple lines.

<TextArea
  label="Description"
  placeholder="Add more context"
  rows={5}
/>

<TextArea
  label="About"
  {...register('about')}
  error={errors.about?.message}
/>

This is the standard pattern used in brand-overview editing surfaces.

TextArea supports:

label
error
all normal textarea HTML props such as value, defaultValue, onChange, placeholder, rows, disabled, id, and className

For raw multi-line input styling without label or error handling, use TextAreaPrimitive directly.

For normal forms, use TextArea.

Pattern	Path	Notes
Brand story editing	`fsai/packages/shared-ui/src/modules/brandOverview/components/BrandStoryTab/BrandStoryTab.tsx`	Standard labeled long-form editing field.
Brand overview metadata	`fsai/packages/shared-ui/src/modules/brandOverview/components/BrandOverviewTab/BrandOverviewTab.tsx`	Used alongside other form controls in a card.
Dynamic details editing	`fsai/packages/shared-ui/src/components/DetailsGrid/DetailsGrid.components.tsx`	Used for editable long-text fields inside a richer editing surface.

Do use TextArea for descriptions, notes, and other multi-line content
Do pass error={errors.field?.message} in forms
Do use TextAreaPrimitive only when you explicitly need raw styling without field shell behavior
Don't use Input for content that should naturally wrap across lines