Textarea

Multi-line text input with floating label, character counter, auto-resize, and error states.

Source

Import

ts 
import Textarea from '$lib/components/Textarea.svelte';

Usage

svelte 
<Textarea label="Bio" placeholder="Tell us about yourself..." />

Character Counter

Pass maxlength to show a live character counter below the textarea.

Visible to everyone

0/150
svelte 
<Textarea label="Bio" maxlength={150} placeholder="Tell us about yourself..." />

Auto Resize

When autoresize is set, the textarea expands with content instead of scrolling.

svelte 
<Textarea label="Caption" autoresize rows={2} placeholder="Add a caption..." />

States

Error and disabled states.

Bio is required.

svelte 
<!-- Error -->
<Textarea label="Bio" error="Bio is required." />

<!-- Disabled -->
<Textarea label="Description" value="This account is disabled." disabled />

Multiple Sizes

0/300

API Reference

PropTypeDefaultDescription
label string—Floating label text.
value string''Bindable textarea value.
placeholder string—Placeholder text shown when empty.
rows number3Initial row count.
maxlength number—Max character count — shows a counter.
autoresize booleanfalseGrows with content, no scrollbar.
hint string—Helper text shown below the textarea.
error string—Error message — replaces hint, adds red ring.
disabled booleanfalseDisables input and reduces opacity.
class string—Extra CSS classes.