Textarea

Multi-line text input field for longer user input. Supports various sizes and auto-resizing.

Installation

Import

import { Textarea } from '@svelte-atoms/core/textarea';

Preset Configuration

Customize the textarea appearance using presets

You can customize the default styles for Textarea components by defining presets in your configuration:

Examples

Explore different textarea variations

Basic Textarea

Simple multi-line text input

Code

<Textarea.Root>
  <Textarea.Control placeholder="Enter your message..." />
</Textarea.Root>

Different Sizes

Control height with rows

Code

<Textarea.Root>
  <Textarea.Control rows={3} placeholder="Small (3 rows)" class="max-w-lg" />
</Textarea.Root>
<Textarea.Root>
  <Textarea.Control rows={6} placeholder="Medium (6 rows)" class="max-w-lg" />
</Textarea.Root>
<Textarea.Root>
  <Textarea.Control rows={10} placeholder="Large (10 rows)" class="max-w-lg" />
</Textarea.Root>

With Character Limit

Show remaining characters

0 / 200

Code

<script lang="ts">
  let message = $state('');
  const maxLength = 200;
</script>

<Textarea.Root>
  <Textarea.Control 
    bind:value={message} 
    maxlength={maxLength} 
    placeholder="Maximum 200 characters" 
  />
</Textarea.Root>
<p class="text-muted-foreground text-right text-sm">
  {message.length} / {maxLength}
</p>

Disabled State

Non-editable textarea

Code

<Textarea.Root>
  <Textarea.Control disabled value="This textarea is disabled" />
</Textarea.Root>

API Reference

Textarea.Root

Container for the textarea component.

Prop

Type

Default

Description

class

string

Additional CSS classes

Textarea.Control

The actual textarea element.

Prop

Type

Default

Description

value

string

Textarea value (bindable)

placeholder

string

Placeholder text

rows

number

Number of rows

maxlength

number

Character limit

disabled

boolean

false

Disable textarea

readonly

boolean

false

Make read-only

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

• Proper label association
• Error message linking
• Keyboard accessible
• Resize handle visible
• Screen reader friendly

Tabs

Toast