Textarea

Multi-line text input component for forms

Installation

pnpm add @wandercom/design-system-web

Usage

import { Textarea } from '@wandercom/design-system-web/ui/textarea';

export function Example() {
  return <Textarea placeholder="Enter your message" />;
}

Examples

Loading example...
// Default size
<Textarea placeholder="Enter your message" />

// Small size
<Textarea size="sm" placeholder="Enter your message" />

// Disabled state
<Textarea placeholder="Enter your message" disabled />

// Invalid state
<Textarea
  placeholder="Enter your message"
  aria-invalid="true"
/>

Custom row count (number of visible text rows)

<Textarea placeholder="Short textarea" rows={3} />

Resize behavior

Loading example...
// No resize (default)
<Textarea placeholder="Cannot be resized" resize="none" />

// Vertical resize only
<Textarea placeholder="Can be resized vertically" resize="vertical" />

// Horizontal resize only
<Textarea placeholder="Can be resized horizontally" resize="horizontal" />

// Both directions
<Textarea placeholder="Can be resized in both directions" resize="both" />

Props

size?:

'default' | 'sm'
Size variant of the textarea. Default uses text-base, sm uses text-body.

resize?:

'none' | 'vertical' | 'horizontal' | 'both'
Controls the resize behavior of the textarea. Defaults to none.

placeholder?:

string
Placeholder text displayed when textarea is empty.

rows?:

number
Number of visible text rows. Defaults to browser default.

disabled?:

boolean
Disables the textarea when true.

className?:

string
Additional CSS classes to apply.

ref?:

React.Ref<HTMLTextAreaElement>
Forward ref to the underlying textarea element.
Textarea