Textarea

A multi-line text input field for longer form content.

Anatomy

<script>
  import { Textarea } from "@saas-ui/svelte/components/textarea";
</script>

<Textarea placeholder="Enter description..." />

<!-- Auto-resizing textarea -->
<Textarea.Autoresize placeholder="Auto-grows as you type..." />

Examples

Autoresize Accessibility

Use Textarea.Autoresize for auto-expanding textareas.

<Textarea.Autoresize
	placeholder="Start typing..."
	minRows={1}
	maxRows={40}
/>

Basic Accessibility

Basic textarea with default styling.

<Textarea placeholder="Comment..." />

Error Text Accessibility

Use Field.ErrorText to show validation errors.

<HStack align="center" gap={10} class="w-full">
	<Field.Root invalid required>
		<Field.Label>Comment</Field.Label>
		<Textarea invalid placeholder="Start typing..." variant="subtle" />
		<Field.ErrorText>Field is required</Field.ErrorText>
	</Field.Root>
	<Field.Root invalid required>
		<Field.Label>Comment</Field.Label>
		<Textarea invalid placeholder="Start typing..." variant="outline" />
		<Field.ErrorText>Field is required</Field.ErrorText>
	</Field.Root>
</HStack>

Field Accessibility

Use Field.Root to wrap the textarea with label and helper text.

<Field.Root required>
	<Field.Label>Message</Field.Label>
	<Textarea placeholder="Enter your message..." variant="subtle" />
	<Field.HelperText>Your message will be reviewed.</Field.HelperText>
</Field.Root>

Helper Text Accessibility

Use Field.HelperText to add helper text below the textarea.

<HStack align="center" gap={10} class="w-full">
	<Field.Root required>
		<Field.Label>Comment</Field.Label>
		<Textarea placeholder="Start typing..." variant="subtle" />
		<Field.HelperText>Max 500 characters.</Field.HelperText>
	</Field.Root>
	<Field.Root required>
		<Field.Label>Comment</Field.Label>
		<Textarea placeholder="Start typing..." variant="outline" />
		<Field.HelperText>Max 500 characters.</Field.HelperText>
	</Field.Root>
</HStack>

Hook Form Accessibility

Example form with textarea and input fields.

<form>
	<VStack align="start" class="max-w-sm">
		<Field.Root required>
			<Field.Label>Username</Field.Label>
			<Input placeholder="@username" name="username" />
			<Field.HelperText>This is your public display name.</Field.HelperText>
		</Field.Root>
		<Field.Root required>
			<Field.Label>Profile bio</Field.Label>
			<Textarea placeholder="I am ..." name="bio" />
			<Field.HelperText>A short description of yourself</Field.HelperText>
		</Field.Root>
		<Button type="submit">Submit</Button>
	</VStack>
</form>

Resize Accessibility

Use the resize prop to control resize behavior.

<VStack gap={4} class="w-64">
	{#each textareaResizeOptions as resize}
		<VStack gap={2} class="items-center">
			<Text size="xs">{resize}</Text>
			<Textarea {resize} placeholder="Search the docs..." />
		</VStack>
	{/each}
</VStack>

Sizes Accessibility

Use the size prop to change the size of the textarea.

<VStack gap={4} class="w-80">
	{#each textareaSizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<Textarea {size} placeholder="{size} size" />
		</VStack>
	{/each}
</VStack>

Variants Accessibility

Use the variant prop to change the visual style.

<VStack gap={4} class="w-80">
	{#each inputVariants as variant}
		<VStack gap={2} class="items-center">
			<Text size="xs">{variant}</Text>
			<Textarea {variant} placeholder={variant} />
		</VStack>
	{/each}
</VStack>

Props

Prop	Type	Default	Description
`variant`	`outline \| subtle \| flushed`	`outline`	The visual style of the textarea.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the textarea.
`invalid`	`boolean`	`false`	Whether the textarea is in an invalid state.
`disabled`	`boolean`	`false`	Whether the textarea is disabled.
`class`	`text`	-	CSS class to apply to the component.