Textarea

The Textarea component provides a styled multi-line text input with support for auto-resizing, form integration, and accessibility features. It's designed for collecting longer text content like descriptions, messages, or comments.

Examples

Basic Usage

<Textarea 
  placeholder="Enter your message here"
  rows={3}
/>

With Initial Value

<Textarea 
  value="This is a pre-filled textarea with some initial content."
  rows={3}
/>

Auto-resize

<Textarea 
  placeholder="This textarea will grow as you type..."
  autoResize={true}
  rows={2}
/>

Disabled State

<Textarea 
  value="This textarea is disabled and cannot be edited."
  disabled={true}
  rows={3}
/>

Read-only State

<Textarea 
  value="This textarea is read-only but can still be focused and copied."
  readonly={true}
  rows={3}
/>

With Character Limit

<Textarea 
  placeholder="Maximum 100 characters allowed"
  maxlength="100"
  rows={3}
/>

Required Field

<Textarea 
  placeholder="This field is required"
  required={true}
  rows={3}
/>

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Textarea value
`placeholder`	`string`	`''`	Placeholder text
`rows`	`number`	`3`	Number of visible text rows
`name`	`string`	Required	Name attribute for the textarea
`required`	`boolean`	`false`	Whether the textarea is required
`disabled`	`boolean`	`false`	Whether the textarea is disabled
`readonly`	`boolean`	`false`	Whether the textarea is read-only
`autoResize`	`boolean`	`false`	Whether to automatically resize based on content
`minlength`	`string`	Required	Minimum length of text
`maxlength`	`string`	Required	Maximum length of text
`autocomplete`	`string`	Required	HTML autocomplete attribute
`ariaLabel`	`string`	Required	ARIA label for accessibility
`id`	`string`	`auto-generated`	HTML id for accessibility
`class`	`string`	`''`	Additional CSS classes

Events

Event	Detail Type	Description
`oninput`	`{ value: string }`	Fired on each keystroke or input
`onchange`	`{ value: string }`	Fired when the value changes
`onfocus`	`Event`	Fired when the textarea gains focus
`onblur`	`Event`	Fired when the textarea loses focus

Accessibility

The Textarea component follows accessibility best practices:

Native <textarea> element for best compatibility
Proper focus states with visible indicators
Support for ARIA labels
Proper disabled and readonly states
Compatible with screen readers
Integrates with form validation

Form Integration

The Textarea component integrates with the Form component for validation and submission:

<Form onSubmit={handleSubmit}>
  <FormField label="Message" error={errors.message}>
    <Textarea 
      name="message"
      required={true}
      placeholder="Enter your message"
    />
  </FormField>
  <Button type="submit">Send</Button>
</Form>