Introduction

A multi-line text input control designed for gathering long-form user feedback, descriptions, biographies, or custom comments. It seamlessly integrates with standard field containers to display visual labels, validation errors, and helper text out of the box.

The Textarea component is fully integrated as a textarea block in the Page Builder, allowing content authors and developers to configure row heights, input placeholders, validation criteria, and layouts directly within Sveltia CMS.

Usage

These configurations represent exactly how page-builder block items are constructed.

1. Standalone Biography Input (Standard Layout)

A standard biography text input with descriptive labels, helpful hints, and a default height. Ideal for general profile setups or user registration steps.

{
  "type": "textarea",
  "label": "About Yourself",
  "helperText": "Tell us about your background and interests.",
  "placeholder": "Write a brief biography...",
  "rows": 4,
  "interactive": true
}

2. Character-Restricted Comments (Custom Validator Expression)

Enforces strict input validation constraints on long text blocks. The CMS processes evaluation criteria client-side to instantly flag errors if the input exceeds specific limitations.

{
  "type": "textarea",
  "label": "Campaign Feedback",
  "placeholder": "Leave a public comment...",
  "rows": 3,
  "validator": "(value) => value.length <= 140 || 'Feedback must be 140 characters or less'",
  "interactive": true
}

Props

| Validation Code (validator) | string | - | Client-side JS expression evaluating to a function. Returns an error string if validation fails (e.g., `"(value) => value.length > 10 | | 'Too short'"`). |

| Visual Variant (variant) | select | "outline" | Theme border style option.
• "outline" — Standard full border outline.
• "surface" — Soft filled background.
• "subtle" — Tinted gray fill.
• "flushed" — Underline style border only. | | Resize Capability (resize) | select | "vertical" | Controls whether users can drag to stretch the input box.
• Options: "none", "both", "horizontal", "vertical". | | Enable Hydration (interactive) | boolean | true | When true, hydrates the component as a client-side island to compute live character limits and error validation states. |

Technical & Accessibility Implementation

• Seamless Field Wrapping: If provided with fields like label or helperText, the component automatically registers itself within the active Field context. This coordinates color-coded warnings and helper highlights smoothly.
• Client Validation Compilation: Validator expressions passed via JSON configuration strings are reconstructed safely on the client browser using new Function(). This ensures robust, zero-lag inline validation without bloated server endpoints.
• Accessibility Attributes: The text input button automatically binds to companion labels using semantic IDs (aria-describedby for help prompts, aria-invalid for failing conditions).