Miltinson.Design system
GitHub

Textarea

Labelled multiline text field with hint and error wiring.

atomsSource
import { Textarea } from '@elirobinson/react/components/atoms/Textarea';

Styles: @elirobinson/react/styles/atoms/field.css — already included when you import @elirobinson/react/styles.css.

Show code
import { Textarea } from '@elirobinson/react/components/atoms/Textarea';

export default function Basic() {
  return <Textarea label="Message" placeholder="Tell me what you need help with…" />;
}

When to use it

Textarea is Input's multiline sibling — same label/hint/error wiring, same required label. Use it for anything that needs more than one line: a message, notes, a description. Reach for Input when a single line is enough.

With a hint

Aim for 2–3 sentences — I'll follow up with questions.
Show code
import { Textarea } from '@elirobinson/react/components/atoms/Textarea';

export default function WithHint() {
  return (
    <Textarea
      label="Message"
      placeholder="Tell me what you need help with…"
      hint="Aim for 2–3 sentences — I'll follow up with questions."
    />
  );
}

With an error

error replaces hint — only one message shows at a time, and the error text gets role="alert".

Enter a message before sending.
Show code
import { Textarea } from '@elirobinson/react/components/atoms/Textarea';

export default function WithError() {
  return (
    <Textarea
      label="Message"
      placeholder="Tell me what you need help with…"
      error="Enter a message before sending."
    />
  );
}

Props

PropTypeDefaultDescription
labelrequiredstring——
errorstring——
hintstring——

Also accepts all TextareaHTMLAttributes<HTMLTextAreaElement> props.

Accessibility

  • Same wiring as Input: a real <label htmlFor>, hint/error text linked through aria-describedby, and aria-invalid="true" plus role="alert" on the error text when error is set.
  • The native resize handle is left on (resize: vertical in the stylesheet) — the component doesn't disable it.
  • The ref forwards to the underlying <textarea>.

Do

  • Pass label always — required, same field pattern as Input.
  • Use hint to set expectations before typing and error for validation feedback after submit.
  • Let the native resize handle work — Textarea doesn’t disable it.

Don't

  • Use Textarea for a single line of text — Input is the right call there.
  • Expect both hint and error to render together — only error shows once it’s set.
  • Hardcode a tiny rows value for content you know runs long — give it room to breathe.