🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Textarea

A multi-line text input field that allows users to enter and edit longer text content.

Textareas are used when users need to input text that spans multiple lines, such as comments, descriptions, messages, or other long-form content. Unlike single-line inputs, textareas automatically wrap text and can be resized by users. They're essential for forms that collect detailed information or user-generated content.

The component automatically handles focus states, hover effects, and disabled states with appropriate visual feedback. It supports all standard HTML textarea attributes including rows, cols, maxLength, and placeholder.

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.

Additional Classes

Other 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 Additional Classes Accessibility

Contribute