Textarea

Multi-line text input component for forms

Installation

pnpm add @wandercom/design-system-web

Usage

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

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

Examples

Loading example...
14 lines
// 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)

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

Character count

Compose Textarea (via InputGroupTextarea) with the useCharacterLimit hook and InputGroupCharacterCount addon to display a live count/max counter at the bottom of the field. Any input — typing, paste, drop, IME — that would push the value past maxLength is rejected; the value can never exceed the cap. Plug your form library (React Hook Form, TanStack Form, Zod, etc.) into onValueChange to sync state.

Loading example...
26 lines
import {
  InputGroup,
  InputGroupAddon,
  InputGroupCharacterCount,
  InputGroupTextarea,
  useCharacterLimit,
} from '@wandercom/design-system-web/ui/input-group';

export function Example() {
  const { count, maxLength, inputProps } = useCharacterLimit({
    maxLength: 70,
  });

  return (
    <InputGroup>
      <InputGroupTextarea
        {...inputProps}
        placeholder="Tell guests what makes this stay special"
        rows={4}
      />
      <InputGroupAddon align="block-end" className="justify-end">
        <InputGroupCharacterCount count={count} maxLength={maxLength} />
      </InputGroupAddon>
    </InputGroup>
  );
}

Resize behavior

Loading example...
11 lines
// 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