Textarea

Displays a form textarea or a component that looks like a textarea.

Component Source

View the source code for the textarea component.

$lib/components/ui/textarea/textarea.svelte

Installation

npx nnuikit add textarea

import Textarea from "$lib/components/ui/textarea/textarea.svelte";

Quick Start

<Textarea placeholder="Type your message here." />

Interactive Playground

Configure disabled state and placeholder.

Your message

Your message will be copied to the support team.

<Textarea placeholder="Type your message here." />

States

Disabled

Placeholder

Examples

Common usage patterns.

With Label

Your Message

This is a hint text to help user.

<div class="grid w-full gap-1.5">
  <label for="demo" for="message">Your Message</Label>
  <Textarea placeholder="Type your message here." id="message" />
  <p class="text-sm text-muted-foreground">This is a hint text.</p>
</div>

With Button

<div class="grid w-full gap-2">
  <Textarea placeholder="Type your message here." />
  <Button>Send message</Button>
</div>

Accessibility

Native input: uses real <textarea> element

Keyboard: standard text input behavior

Validation: aria-invalid for error states

Label: associates via htmlFor or wrapping <label>

Props

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	false	Whether the textarea is disabled
`value`	`string`	-	Controlled value