Textarea

The Textarea component provides a multi-line text input field that allows users to enter and edit longer text content. It’s useful for collecting larger amounts of text such as comments, descriptions, or messages.

Usage

<script>
  import { Textarea } from "$lib/components/ui/textarea";
</script>

<Textarea placeholder="Enter your message" />

Examples

Basic Textarea

A simple textarea field.

Fixed Rows

Textarea with a defined number of visible rows.

Disabled Textarea

A textarea in its disabled state.

With Default Value

Textarea with predefined content.

Textarea with Label

Textarea with an associated label for accessibility.

Your message

Your message will be sent to our support team.

Form with Textarea

Textarea integrated in a form with a submit button.

Character Count

Textarea with a character count display.

Bio

Maximum 200 characters

API Reference

Properties

The Textarea component accepts all standard HTML textarea attributes plus the following:

Property	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to apply to the textarea.
`ref`	`HTMLTextAreaElement`	`null`	Reference to the underlying textarea element.
`value`	`string`	`undefined`	The value of the textarea element.

Events

The Textarea component forwards all standard HTML textarea events:

Event	Type	Description
`blur`	`FocusEvent`	Fires when the textarea loses focus.
`change`	`Event`	Fires when the textarea value changes.
`focus`	`FocusEvent`	Fires when the textarea receives focus.
`input`	`InputEvent`	Fires when the textarea value is being modified.
And more standard events like `click`, `keydown`, `keypress`, etc.

Implementation

The Textarea component is a styled wrapper around the native HTML textarea element with custom focus, hover, and disabled styles:

// Textarea styling
'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm'

The component is built with accessibility in mind, ensuring it works well with screen readers and keyboard navigation. It’s designed to be used in forms for collecting larger text inputs and integrates seamlessly with other form components.