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

bond

Bond

undefined

Bond object for component communication

base

Component | Snippet

undefined

Base component or snippet to render

preset

PresetModuleName | string

undefined

Preset module name for styling

variants

VariantDefinition | Function

undefined

Variant definition or function to resolve variants

class

ClassValue | ClassValue[]

undefined

CSS class(es) to apply to the element

string

undefined

HTML tag to render as

global

boolean

false

Whether to use global styles

initial

NodeFunction

undefined

Function called on initial render

enter

TransitionFunction

undefined

Transition function for entering

exit

TransitionFunction

undefined

Transition function for exiting

animate

NodeFunction

undefined

Animation function

onmount

NodeFunction

undefined

Function called when element is mounted

ondestroy

NodeFunction

undefined

Function called when element is destroyed

children

Snippet

undefined

Children content snippet

Textarea.Control

The actual textarea element.

Prop

Type

Default

Description

value

string | undefined

Value

placeholder

string | undefined

Placeholder

disabled

boolean | undefined

false

Disabled

readonly

boolean | undefined

false

Readonly

rows

number | undefined

Rows

cols

number | undefined

Cols

maxlength

number | undefined

Maxlength

minlength

number | undefined

Minlength

required

boolean | undefined

false

Required

autofocus

boolean | undefined

false

Autofocus

autocomplete

string | undefined

Autocomplete

spellcheck

boolean | undefined

false

Spellcheck

wrap

"soft" | "hard" | "off" | undefined

undefined

Wrap

Accessibility

Built-in Accessibility Features

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

Tabs

Toast