Forms

Textarea

For longer text: notes, descriptions, messages.

Installation

npx sinaui add textarea

Copy src/lib/ui/Textarea.svelte and tokens.css. No dependencies.

Examples

Basic

Grows with its text in browsers that support field-sizing; elsewhere it's a resizable box.

Marginal note

It grows as you write.

<script lang="ts">
	import Textarea from '#lib/ui/Textarea.svelte';
</script>

<Textarea
	label="Marginal note"
	placeholder="Al-Biruni's reading of this passage differs…"
	hint="It grows as you write."
/>

With validation

Start typing: the error clears once there's enough to file.

Summary of the work

Write at least 20 characters so the librarian can file it.

<script lang="ts">
	import Textarea from '#lib/ui/Textarea.svelte';

	let summary = $state('');
	const error = $derived(
		summary.trim().length < 20
			? 'Write at least 20 characters so the librarian can file it.'
			: undefined
	);
</script>

<Textarea label="Summary of the work" rows={4} bind:value={summary} {error} />

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`string \| null`, bindable
`rows`	`number`: minimum height	`3`
`hint`, `error`	`string`

Accessibility

Same wiring as Input: required label, hint and error via aria-describedby, aria-invalid on error.
16px text so iOS Safari doesn't zoom in on focus.