TextAreaField

MoleculeThrive, no shadcn equivalent

A multi-line input that grows with what is typed, with its label and one line of help or error.

components/molecules/text-area-field.tsx — Label + Textarea

Use it for: Feedback, notes, descriptions — anything longer than a line.
Not for: A name, an email or anything that fits on one line.

States

What went well?

They will see this with your name.

Default

What went well?

Write at least one sentence.

Error

What went well?

Disabled

Usage

import { TextAreaField } from '@/components/molecules/text-area-field';

<TextAreaField
  label="What went well?"
  name="praise"
  helperText="Be specific: what did they do, and what did it change?"
/>

Props

TextAreaField props
Prop	Type	Default	Description
label	string	—	Visible label, and the accessible name. Required.
helperText	string	—	One line of help under the control, read with it.
errorMessage	string	—	Replaces the helper text, turns it red and marks the control aria-invalid.
required	boolean	false	Adds the asterisk and the native required state.
...rest	ComponentProps<'textarea'> (no id)	—	value/onChange, name, rows, maxLength… The id is generated.

Accessibility

Same labelling and description as TextField.
Enter adds a line; it never submits the form.