Textarea

Multi-line input that field-sizes with its content. Borderless fill deepens on hover and focus — no reflow, no jump — and aria-invalid flips the focus ring to destructive in one beat.

Usage

textarea.svelte

<script lang="ts">
	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
	import type { HTMLTextareaAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		'data-slot': dataSlot = 'textarea',
		...restProps
	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
</script>

<textarea
	bind:this={ref}
	data-slot={dataSlot}
	class={cn(
		'flex field-sizing-content min-h-16 w-full resize-none rounded-(--radius-panel) bg-input/30 px-3 py-3 text-base transition-colors duration-(--motion-duration-fast) outline-none placeholder:text-muted-foreground hover:bg-input/50 focus-visible:bg-input/50 focus-visible:ring-(length:--ring-width) focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:ring-destructive/40',
		className
	)}
	bind:value
	{...restProps}
></textarea>

States

Default

Filled

Disabled

Invalid

textarea.svelte

<script lang="ts">
	import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils.js';
	import type { HTMLTextareaAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		'data-slot': dataSlot = 'textarea',
		...restProps
	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
</script>

<textarea
	bind:this={ref}
	data-slot={dataSlot}
	class={cn(
		'flex field-sizing-content min-h-16 w-full resize-none rounded-(--radius-panel) bg-input/30 px-3 py-3 text-base transition-colors duration-(--motion-duration-fast) outline-none placeholder:text-muted-foreground hover:bg-input/50 focus-visible:bg-input/50 focus-visible:ring-(length:--ring-width) focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-(length:--ring-width) aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:ring-destructive/40',
		className
	)}
	bind:value
	{...restProps}
></textarea>

With Label

Pair a Label with a Textarea for accessible multi-line fields.

Your message

textarea-with-label.svelte

<script lang="ts">
	import { Textarea } from '$lib/components/ui/textarea';
	import { Label } from '$lib/components/ui/label';
</script>

<div class="grid w-full max-w-sm gap-1.5">
	<Label for="message">Your message</Label>
	<Textarea id="message" placeholder="Type your message here." />
</div>

With Text

Helper text below the Textarea provides context without occupying a Field slot.

Your message

Your message will be copied to the support team.

textarea-with-text.svelte

<script lang="ts">
	import { Textarea } from '$lib/components/ui/textarea';
	import { Label } from '$lib/components/ui/label';
</script>

<div class="grid w-full max-w-sm gap-1.5">
	<Label for="message-text">Your message</Label>
	<Textarea id="message-text" placeholder="Type your message here." />
	<p class="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
</div>

With Button

Send-message pattern — Textarea stacked above a full-width submit Button.

textarea-with-button.svelte

<script lang="ts">
	import { Textarea } from '$lib/components/ui/textarea';
	import { Button } from '$lib/components/ui/button';
</script>

<div class="grid w-full max-w-sm gap-2">
	<Textarea placeholder="What's on your mind?" />
	<Button>Send message</Button>
</div>

API reference

Inherits every native HTMLTextAreaElement attribute via spread. Uses field-sizing: content so height tracks the value without a manual rows prop.

Type	Default	Description
`string \| number \| string[] \| undefined (bindable)`	—	Two-way bindable value.
`boolean`	`false`	Disables the control and drops opacity to 50%.
`string`	—	Ghost text rendered before the user types.
`'true' \| 'false'`	—	Flips the focus ring to destructive without changing layout. Pair with aria-describedby pointing at the error.
`HTMLTextAreaElement \| null`	`null`	Two-way-bindable element reference.
`string`	—	Merged onto the root via tailwind-merge.