Text Area Components

Filled Text Areas

Filled text areas use a solid background (surface-container-low) and are the default variant for multi-line inputs. They provide clear visual prominence for user input areas and automatically grow as content is added.

Default

With Help Text

Enter a detailed description

Required

Disabled

With Error

Please enter at least 20 characters

With Value

With Custom Rows

Secondary Color

Tertiary Color

Outlined Text Areas

Outlined text areas use a border to define their boundaries instead of a filled background. They are less prominent and work well in dense UIs or when multiple fields are grouped together. Like the filled variant, these also auto-grow as content is added.

Default

With Help Text

Enter a detailed description

Required

Disabled

With Error

Please enter at least 20 characters

With Value

With Custom Rows

Secondary Color

Tertiary Color

Usage

<!-- Filled text area (default variant) -->
<c-forms.textarea.filled id="description">Description</c-forms.textarea.filled>

<!-- Outlined text area -->
<c-forms.textarea.outlined id="outlined_description">Description</c-forms.textarea.outlined>

<!-- With help text -->
<c-forms.textarea.filled id="description_help" help_text="Enter a detailed description">Description</c-forms.textarea.filled>
<c-forms.textarea.outlined id="outlined_help" help_text="Enter a detailed description">Description</c-forms.textarea.outlined>

<!-- Required field -->
<c-forms.textarea.filled id="comments" required>Comments</c-forms.textarea.filled>

<!-- With error message -->
<c-forms.textarea.filled id="feedback_error" 
    error="Please enter at least 20 characters">Feedback</c-forms.textarea.filled>

<!-- With initial value -->
<c-forms.textarea.filled id="prefilled" value="This is a sample text">Prefilled Text</c-forms.textarea.filled>

<!-- With custom rows -->
<c-forms.textarea.filled id="custom_rows" rows="5">Custom Rows</c-forms.textarea.filled>

<!-- Disabled field -->
<c-forms.textarea.filled id="disabled" disabled>Disabled Field</c-forms.textarea.filled>

<!-- With color variants -->
<c-forms.textarea.filled id="secondary" color="secondary">Secondary Field</c-forms.textarea.filled>
<c-forms.textarea.outlined id="tertiary_outlined" color="tertiary">Tertiary Field</c-forms.textarea.outlined>

Attributes

Attribute
Type
Default
Description
id string none Unique identifier for the textarea field (required)
color string "primary" Textarea color theme. Options: "primary", "secondary", "tertiary"
rows number 3 Initial number of visible rows (before auto-growing)
help_text string none Helper text displayed below the textarea
error string none Error message to display
value string none Initial value for the textarea
required boolean false When true, the field is required
disabled boolean false When true, the textarea is disabled and non-interactive

Auto-Growing Behavior

Both the filled and outlined textarea variants feature automatic height adjustment (auto-growing). As users type or paste content, the textarea will expand vertically to accommodate the text without showing scrollbars. This provides a better user experience by showing all content at once.

The initial height is determined by the rows attribute (default: 3), but the component will automatically grow as needed. This behavior is implemented using Unpoly.js for seamless, JavaScript-enhanced interactions.