Textarea

The Textarea component provides a flexible multi-line text input with features like auto-resize, character counting, and size variants. It maintains consistency with other form components using typography tokens and includes comprehensive accessibility support.

Basic Textarea

Multi-line text input for longer content

Your Message

Enter your message or comments

Comment

Share your thoughts or feedback

Character Counts:

Message: 0 characters
Comment: 107 characters

API Reference

Props

Prop	Type	Default	Description
`id`	`string`	required	Unique identifier for the textarea
`name`	`string`	`id`	Form field name
`label`	`string`	required	Field label text
`value`	`string`	`''`	Textarea value (bindable)
`placeholder`	`string`	`''`	Placeholder text
`required`	`boolean`	`false`	Whether field is required
`disabled`	`boolean`	`false`	Disables the textarea
`error`	`string \\| null`	`null`	Error message to display
`helper`	`string`	-	Helper text below textarea
`rows`	`number`	`4`	Initial number of rows
`maxLength`	`number`	-	Maximum character limit
`autoResize`	`boolean`	`true`	Enable automatic height adjustment
`size`	`'sm' \\| 'md' \\| 'lg'`	`'md'`	Textarea size variant

Usage Examples

Basic Textarea

<script>
  import Textarea from '$lib/shared/components/forms/Textarea.svelte';
  
  let message = $state('');
</script>

<Textarea
  id="message"
  label="Your Message"
  bind:value={message}
  placeholder="Type your message here..."
  helper="Share your thoughts or feedback"
/>

With Character Limit

<script>
  import Textarea from '$lib/shared/components/forms/Textarea.svelte';
  
  let description = $state('');
</script>

<Textarea
  id="description"
  label="Product Description"
  bind:value={description}
  placeholder="Describe your product..."
  maxLength={500}
  helper="Maximum 500 characters"
  rows={6}
/>

Auto-resize Disabled

<script>
  import Textarea from '$lib/shared/components/forms/Textarea.svelte';
  
  let code = $state('');
</script>

<Textarea
  id="code"
  label="Code Snippet"
  bind:value={code}
  placeholder="Paste your code here..."
  autoResize={false}
  rows={10}
  helper="Fixed height with scrollbar"
/>

Different Sizes

<!-- Compact -->
<Textarea
  id="notes"
  label="Quick Notes"
  size="sm"
  placeholder="Brief notes..."
  rows={2}
/>

<!-- Large -->
<Textarea
  id="essay"
  label="Essay"
  size="lg"
  placeholder="Write your essay..."
  rows={8}
/>

Features

Auto-resize

The textarea automatically adjusts its height based on content:

Enabled by default - Grows as user types
Configurable - Can be disabled for fixed height
Smooth transition - Uses CSS transitions for smooth resizing
Minimum height - Respects initial rows setting

Character Counting

When maxLength is set:

Real-time counter - Shows current/max characters
Visual feedback - Counter appears in top-right
Native validation - Browser enforces the limit
Accessible - Screen readers announce character limits

Typography Integration

Uses design system tokens for consistent text rendering:

/* Small size */
--typography-caption-size
--typography-caption-weight
--typography-caption-line

/* Medium size (default) */
--typography-body-size
--typography-body-weight  
--typography-body-line

/* Large size */
--typography-heading-size
--typography-heading-weight
--typography-heading-line