Textarea

Preview

Installation

pnpm add fancy-ui-svelte

import { Textarea } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Textarea } from 'fancy-ui-svelte';
</script>

<Textarea />

Examples

Basic Usage

A single multi-line message field with a bound value.

svelte

<script lang="ts">
	import { Textarea } from "$lib/fancy-ui/textarea";

	let message = $state("");
</script>

<div class="w-full max-w-sm">
	<Textarea bind:value={message} placeholder="A multi-line message…" label="Message" />
</div>

With Counter

maxlength plus the live "n / max" counter.

svelte

<script lang="ts">
	import { Textarea } from "$lib/fancy-ui/textarea";

	let message = $state("A multi-line message with resizing…");
</script>

<div class="w-full max-w-sm">
	<Textarea bind:value={message} maxlength={500} showCount label="Message" />
</div>

Auto Resize

Grows with content instead of scrolling.

svelte

<script lang="ts">
	import { Textarea } from "$lib/fancy-ui/textarea";

	let notes = $state("");
</script>

<div class="w-full max-w-sm">
	<Textarea bind:value={notes} autoResize rows={2} placeholder="Grows as you type…" label="Notes" />
</div>

Props

Prop	Type	Default	Description
`value`	string	`""`	Current value; bindable
`onValueChange`	(value: string) => void	-	Called with the new value on every input event
`placeholder`	string	-	Shown while the field is empty
`disabled`	boolean	`false`	Blocks focus and typing; excluded from form submission
`readonly`	boolean	`false`	Blocks typing but stays focusable and is still submitted, unlike disabled
`required`	boolean	`false`	Native required
`invalid`	boolean	`false`	Drives the error border and aria-invalid
`id`	string	-	Element id
`name`	string	-	Native name, read on form submission
`autocomplete`	FullAutoFill	-	Native autocomplete hint; the union from svelte/elements, not an arbitrary string
`label`	string	-	Accessible name — for a control with no visible Label next to it
`rows`	number	`3`	Visible height in text rows before anything grows it; also the no-JS height
`maxlength`	number	-	Native character ceiling; also the counter's denominator
`showCount`	boolean	`false`	Renders the live "n / max" counter under the field
`autoResize`	boolean	`false`	Grows to fit content instead of scrolling; disables manual resize
`class`	string	-	Additional CSS classes — applied to the textarea itself, not the wrapper
`ref`	HTMLTextAreaElement \| null	`null`	Bindable element reference