Skip to main content

Textarea

The Textarea component is a multi-line text input field designed for capturing larger amounts of text from users. It supports auto-resize, character counting, validation, and rich event handling.

Overview​

Textarea provides a complete multi-line input solution with:

  • Auto-resize capability
  • Character counting with maxLength
  • Resizable dimensions (vertical, horizontal, both, none)
  • Built-in validation
  • Clear functionality
  • Placeholder and helper text
  • Disabled and readonly states
  • Comprehensive event system

Basic Usage​

{
  uuid: "my-textarea",
  name: "description_input",
  component_type: "textarea",
  input: {
    value: { type: "string", value: "" },
    placeholder: { type: "string", value: "Enter description..." },
    label: { type: "string", value: "Description" },
    rows: { type: "number", value: 4 }
  },
  event: {
    onChange: `
      console.log('Textarea value:', EventData.value);
      console.log('Character count:', EventData.characterCount);
    `
  }
}

Component Inputs​

PropertyTypeDefaultDescription
valuestring''Current textarea value
placeholderstring''Placeholder text when empty
labelstring''Label text displayed above textarea
helperTextstring''Helper text displayed below textarea
sizestring'medium'Textarea size: 'small', 'medium', 'large'
variantstring''Visual variant style
statestring'default'State: 'default', 'disabled', 'error', 'success'
resizestring'vertical'Resize behavior: 'vertical', 'horizontal', 'both', 'none'
rowsnumber4Number of visible text rows
colsnumber-Number of visible text columns
maxLengthnumber-Maximum character length
minHeightnumber-Minimum height in pixels
maxHeightnumber-Maximum height in pixels
disabledbooleanfalseDisable textarea interaction
readonlybooleanfalseMake textarea read-only
requiredbooleanfalseMark as required
allowClearbooleanfalseShow clear button
showCountbooleanfalseDisplay character count
autoResizebooleanfalseAuto-resize based on content

Inputs​

value​

Type: string

The current value of the textarea.

input: {
  value: { type: "string", value: "Initial text content" }
}

placeholder​

Type: string

Placeholder text displayed when textarea is empty.

input: {
  placeholder: { type: "string", value: "Enter your message here..." }
}

label​

Type: string

Label text displayed above the textarea.

input: {
  label: { type: "string", value: "Message" }
}

helperText​

Type: string

Helper text displayed below the textarea. Also accepts helper as an alias.

input: {
  helperText: { type: "string", value: "Maximum 500 characters" }
}

size​

Type: string

Textarea size: small, medium, large.

input: {
  size: { type: "string", value: "large" }
}

resize​

Type: string

Controls resize behavior. Options: vertical, horizontal, both, none.

input: {
  resize: { type: "string", value: "both" }
}

rows​

Type: number

Number of visible text rows. Default is 4.

input: {
  rows: { type: "number", value: 6 }
}

maxLength​

Type: number

Maximum character length. When set with showCount, displays a character counter.

input: {
  maxLength: { type: "number", value: 500 },
  showCount: { type: "boolean", value: true }
}

autoResize​

Type: boolean

Automatically resize textarea height based on content.

input: {
  autoResize: { type: "boolean", value: true },
  minHeight: { type: "number", value: 100 },
  maxHeight: { type: "number", value: 300 }
}

Validation Handlers​

Type: boolean

Control when validation occurs.

input: {
  validateOnChange: { type: "boolean", value: true },
  validateOnBlur: { type: "boolean", value: true },
  hasFeedback: { type: "boolean", value: true }
}

rules​

Type: array

Validation rules.

input: {
  rules: {
    type: "array",
    value: [
      { required: true, message: "Description is required" },
      { min: 10, message: "Minimum 10 characters" },
      { max: 500, message: "Maximum 500 characters" }
    ]
  }
}

Events​

onChange​

Triggered: When textarea value changes

EventData:

{
  value: string           // New value
  characterCount: number  // Current character count
}

Example:

event: {
  onChange: `
    $description = EventData.value;
    $charCount = EventData.characterCount;

    // Validate
    if (EventData.value.length < 10) {
      $descriptionError = "Please enter at least 10 characters";
    } else {
      $descriptionError = "";
    }
  `
}

onFocus​

Triggered: When textarea receives focus

event: {
  onFocus: `
    $activeField = "description";
    $helpTextVisible = true;
  `
}

onBlur​

Triggered: When textarea loses focus

EventData:

{
  value: string  // Final value
}

Example:

event: {
  onBlur: `
    $activeField = null;

    // Perform final validation
    const isValid = EventData.value.length >= 10;
    $showValidation = true;
    $descriptionValid = isValid;
  `
}

onClear​

Triggered: When clear button is clicked (if allowClear is true)

event: {
  onClear: `
    $description = "";
    $descriptionError = "";
    $showValidation = false;
  `
}

onResize​

Triggered: When textarea is manually resized by the user

EventData:

{
  height: number  // New height in pixels
  width: number   // New width in pixels
}

Example:

event: {
  onResize: `
    $textareaHeight = EventData.height;
    $textareaWidth = EventData.width;
  `
}

Common Patterns​

Auto-Save Draft​

event: {
  onChange: `
    const content = EventData.value;
    $draftContent = content;
    $charCount = EventData.characterCount;

    // Save draft
    await SaveDraft({
      content: content,
      timestamp: Date.now()
    });

    $lastSaved = new Date().toLocaleTimeString();
  `
}

Character Limit with Warning​

event: {
  onChange: `
    const maxChars = 500;
    const content = EventData.value;
    const remaining = maxChars - content.length;

    $charRemaining = remaining;
    $isNearLimit = remaining < 50;
    $isAtLimit = remaining <= 0;

    if (remaining < 0) {
      $warningMessage = "Character limit exceeded";
    } else if (remaining < 50) {
      $warningMessage = remaining + " characters remaining";
    } else {
      $warningMessage = "";
    }
  `
}

See Also​