Textarea

Textarea is a multi-line text input component for collecting longer text entries.

Textareas provide users with a resizable input field for entering multiple lines of text, making them ideal for comments, descriptions, messages, or any content that requires more space than a single-line input. They automatically handle line breaks and typically include visual affordances like resize handles that let users adjust the input area to their needs. Textareas support all standard input attributes and validation patterns while maintaining consistent styling and accessibility features.

Use textareas when you expect users to enter more than one line of text or when the content length is unpredictable and potentially lengthy. They work well for feedback forms, message composition, biographical information, or detailed descriptions. Textareas should be sized appropriately for their expected content, with minimum heights that accommodate several lines to signal that longer input is expected and welcomed.

Example

Installation


npm install @strongtie/design-system

import { Textarea } from "@strongtie/design-system/textarea"

Props

All components accept standard HTML attributes and React props.

Examples

Disabled

Disabled Textarea

"use client"

import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"

export function TextareaDisabled() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="disabled-textarea">Disabled Textarea</Label>
      <Textarea
        id="disabled-textarea"
        placeholder="You cannot edit this"
        disabled
        defaultValue="This textarea is disabled and cannot be edited."
      />
    </div>
  )
}

With Form

"use client"

import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"

export function TextareaWithForm() {
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const message = formData.get("message") as string
    setSubmitted(message)
  }

  return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="flex flex-col gap-2 space-y-2">
          <Label htmlFor="message">Your Message</Label>
          <Textarea
            id="message"
            name="message"
            placeholder="Type your message here..."
            required
            className="min-h-[100px]"
          />
        </div>
        <Button type="submit">Submit</Button>
      </form>
      {submitted && (
        <div className="rounded-md border p-4">
          <p className="text-sm font-medium">Submitted message:</p>
          <p className="text-muted-foreground mt-2 text-sm">{submitted}</p>
        </div>
      )}
    </div>
  )
}

With Label

Your message

"use client"

import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"

export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea id="message" placeholder="Type your message here..." />
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

textarea

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Tabs Toaster

On This Page

Example Installation Props Examples Disabled With Form With Label Styling Classes Accessibility

Contribute