Textarea ported
A multiline field for notes, descriptions, and longer text.
A multiline field for notes, descriptions, and longer text.
Loading demo…
Guidance
When to use
- Free-form multi-line text like bios, comments, or feedback.
- Fields with a live character count, which rolls its digits in the helper row.
When not to use
- Use input for single-line values.
- Use inline-edit with multiline for a description edited in place on a page.
- Use tag-input when the text is really a list of short values.
pnpm dlx shadcn-svelte@latest add @arcui/textareaUsage
<script lang="ts">
import { Textarea } from '$lib/components/textarea';
let notes = $state('');
</script>
<Textarea label="Release notes" rows={4} bind:value={notes} description="Markdown is supported." />Variants & Examples
Default
Standard appearance and configuration.
<Textarea />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | (Required) Visible label, tied to the textarea with htmlFor. |
description | string | – | Helper copy under the field, linked through aria-describedby. Counts such as \"120 characters\" roll their digits. |
error | string | – | Error copy. Sets aria-invalid and renders in a role=\"alert\" row. |
...props | TextareaHTMLAttributes<HTMLTextAreaElement> | – | Forwarded to the native textarea, including ref, rows, value, onChange, and maxLength. |
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus to the interactive element. |
Accessibility
- Native textarea with a real label.
- Description and error ids are merged into aria-describedby; errors set aria-invalid and use role="alert".
- Animated copy is aria-hidden and mirrored in a visually hidden plain-text span.
Motion
- Message rows open their height on a smooth spring; changed words rise in with a soft blur and counts roll only the digits that changed. - Reduced motion drops the roll, blur, and height spring for instant changes.
Notes for AI
- Use for free-form, multi-line text. Use input for single lines and inline-edit for text edited in place on a page.
- A live character count in description gets the rolling-digit treatment for free.
Source of truth: registry/components/textarea/textarea.tsx