Textarea

A multi-line text input component for longer form content.

Brewery Description
Tasting Notes 
<div className="max-w-lg space-y-6">
  <Field>
    <FieldLabel>Brewery Description</FieldLabel>
    <Textarea placeholder="Tell us about your brewery..." rows={4} />
  </Field>
  <Field>
    <FieldLabel>Tasting Notes</FieldLabel>
    <Textarea 
      placeholder="Describe the flavor profile..." 
      rows={6}
      defaultValue="Rich malty sweetness with notes of caramel and toffee. Balanced hop bitterness with floral and citrus undertones. Clean, crisp finish with a lingering pleasant aftertaste."
    />
  </Field>
</div>

Overview

The Textarea component is a multi-line text input that extends the native HTML textarea element with consistent styling and theming. It’s designed to work seamlessly within the Field component for labels and error handling.

Basic Usage

Description

Textarea can be used with or without labels, and supports all standard textarea states including disabled and read-only.

With Label
With Error
Disabled
Read Only 
<div className="space-y-6 max-w-sm">
  <Field>
    <FieldLabel>With Label</FieldLabel>
    <Textarea placeholder="Enter your comments..." rows={4} />
  </Field>
  
  <Field>
    <Textarea placeholder="Unlabeled textarea" rows={3} />
  </Field>
  
  <Field>
    <FieldLabel>With Error</FieldLabel>
    <Textarea aria-invalid placeholder="This field has an error" rows={3} />
  </Field>
  
  <Field>
    <FieldLabel>Disabled</FieldLabel>
    <Textarea disabled placeholder="This textarea is disabled" rows={3} />
  </Field>
  
  <Field>
    <FieldLabel>Read Only</FieldLabel>
    <Textarea 
      readOnly 
      rows={3}
      defaultValue="This content cannot be edited but can be selected and copied."
    />
  </Field>
</div>

Rows

Description

Control the height of the textarea using the rows attribute. The textarea supports vertical resizing by default.

Small (3 rows)
Medium (5 rows)
Large (8 rows) 
<div className="space-y-6 max-w-sm">
  <Field>
    <FieldLabel>Small (3 rows)</FieldLabel>
    <Textarea placeholder="Enter text..." rows={3} />
  </Field>
  
  <Field>
    <FieldLabel>Medium (5 rows)</FieldLabel>
    <Textarea placeholder="Enter text..." rows={5} />
  </Field>
  
  <Field>
    <FieldLabel>Large (8 rows)</FieldLabel>
    <Textarea placeholder="Enter text..." rows={8} />
  </Field>
</div>

Props

The Textarea component accepts all standard HTML textarea attributes, plus:

PropTypeDefaultDescription
classNamestring-Additional CSS class names
rowsnumber-Number of visible text lines
placeholderstring-Placeholder text
disabledbooleanfalseDisables the textarea
readOnlybooleanfalseMakes the textarea read-only
aria-invalidbooleanfalseIndicates validation error state

Additional Features

  • Vertical Resize: The textarea can be resized vertically by default using the resize handle
  • Validation States: Use aria-invalid to show error styling
  • Focus States: Automatic focus ring styling matching other form components
  • Dark Mode: Fully themed with CSS custom properties