Textarea Component

A multi-line text input component with flexible sizing and styling options.

Quick Example

<Textarea placeholder="Enter your message here..." />
<Textarea placeholder="Outlined variant" variant="outline" />
<Textarea placeholder="Filled variant" variant="filled" />

Props

Prop	Type	Default	Description
placeholder	string	-	Placeholder text
value	string	-	Textarea value
name	string	-	Form field name
id	string	-	Element ID
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the textarea is disabled
readonly	boolean	false	Whether the textarea is read-only
rows	number	4	Number of visible rows
cols	number	-	Number of visible columns
class	string	''	Additional CSS classes
resize	'none' \| 'vertical' \| 'horizontal' \| 'both'	'vertical'	Resize behavior
variant	'default' \| 'outline' \| 'filled'	'default'	Visual style variant

Variants

Default

Outline

Filled

Sizing Options

Different Row Counts

2 rows

4 rows (default)

8 rows

Resize Options

No resize

Vertical resize (default)

Both directions

States

Normal

Required

Disabled

Read-only

This is read-only content that cannot be edited.

Usage Examples

Basic Textarea

<Textarea placeholder="Enter your message" />

Large Textarea with No Resize

<Textarea rows=8 resize="none" placeholder="Fixed size textarea" />

Outlined Variant

<Textarea variant="outline" placeholder="Outlined textarea" />

Form Integration

<Textarea 
  name="message"
  id="contact-message"
  placeholder="Your message..."
  required
  rows=6
/>

Import

import Textarea from '../ui/atoms/Textarea.astro';