Studio
2

Textarea

Installation

pnpm dlx @mielui/svelte add textarea

Usage

Labels and descriptions are connected to the native textarea, preserving external aria-describedby references without duplicate IDs. Conditional descriptions are linked only while rendered. Autoresize responds to value and width changes, includes border-box sizing, and restores the previous inline height when removed.

Import Textarea and bind its value. Add autoresize for message composers that grow with their content.

import { Textarea } from '$lib/mielui/components/textarea';

<Textarea bind:value autoresize label="Message" />

Examples

Basic

With label and description

Disabled

Autoresizing composer

The textarea grows as you type. Its children snippet holds a character count and submit button inside the shared field border.

API reference

Textarea

Accepts a multi-line value.

Prop Type Default
placeholder string | undefined —
label string | undefined —
description string | undefined —
variant "secondary" | "outline" | undefined 'outline'
autoresize boolean | undefined false
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —
element Bindable HTMLTextAreaElement | undefined —
value Bindable ((string | number) & (string | number | string[])) | null | undefined —