Textarea

Textarea

Auto-resizing multi-line text input built on react-textarea-autosize. Supports sizes, error state, and imperative ref API.

Import

import { Textarea } from 'reablocks';

Textarea Props

Also accepts all TextareaAutosizeProps from react-textarea-autosize (e.g. minRows, maxRows, placeholder, disabled, value, onChange).

Basic Usage

<Textarea placeholder="Enter description..." />

Sizes

<Textarea size="small" placeholder="Small" />
<Textarea size="medium" placeholder="Medium" />
<Textarea size="large" placeholder="Large" />

Full Width with Error

<Textarea fullWidth error placeholder="Required field" />

Ref API

const ref = useRef<TextAreaRef>(null);

<Textarea ref={ref} />

// Imperative methods:
ref.current.focus();
ref.current.blur();
ref.current.textareaRef;    // HTMLTextAreaElement ref
ref.current.containerRef;   // Container div ref

TextareaTheme Interface

interface TextareaTheme {
  base: string;       // Container (flex, border, rounded, bg, transition)
  input: string;      // Textarea element (resize-none, bg-transparent)
  fullWidth: string;  // Full width override
  error: string;      // Error border
  disabled: string;   // Disabled state
  sizes: { small, medium, large };
}