Thrive Design System

Components

Textarea

A multi-line text input for collecting longer form content such as descriptions, comments, and messages.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Textarea } from '@thrivecart/ui';

Examples

Basic Textarea

Default Textarea

Simple multi-line text input

<Textarea placeholder="Enter your message..." />

With Label and Helper

With Context

Textarea within a form field with label and helper text

Maximum 500 characters

<div className="flex flex-col gap-1.5">
<label className="text-sm font-medium text-ink-dark">Description</label>
<Textarea placeholder="Describe your campaign..." rows={4} />
<p className="text-xs text-ink-light">Maximum 500 characters</p>
</div>

Disabled

Disabled State

Textarea that is not editable

<Textarea disabled value="This content cannot be edited" />

Best Practices

✓

Set appropriate height

Use the rows prop to set a reasonable default height based on expected content length.

✓

Provide placeholder guidance

Use placeholder text to hint at the expected format or content type.

✗

Don't use for single-line input

Use the Input component for short, single-line values like names or emails.

✗

Don't hide character limits

If there's a max length, show remaining characters to prevent frustration.

Props

Props

Accessibility

  • Associates with labels via id and htmlFor attributes.
  • Supports aria-describedby for helper and error text.
  • Standard keyboard navigation: Tab to focus, type to enter text.
  • Ensure visible focus indicators are present.