Textarea

A multi-line text input component that automatically adjusts its height based on content. Ideal for comments, descriptions, and longer text entries.

Sizes

Available in medium and small sizes.

Medium

Small

States

Error

This field is required

Disabled

Submit on Ctrl/Cmd+Enter

Use the onSubmit prop to handle submission when the user presses Ctrl+Enter (or Cmd+Enter on Mac).

Press Ctrl/Cmd+Enter to submit

interface TextareaProps {
  id: string;
  label?: string;
  value: string;
  placeholder?: string;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onSubmit?: () => void; // Triggered on Ctrl/Cmd+Enter
  autoFocus?: boolean;
  maxRows?: number;
  disabled?: boolean;
  error?: boolean;
  size?: 'medium' | 'small'; // Large size removed
}