Things

The Textarea component provides a multi-line text input with bold borders and shadows that match the Things design system. Built from scratch using React and native HTML textarea elements. No dependencies on any UI library.

Code

TypeScript: Copy this code into components/ui/textarea.tsx:

tsx

import * as React from "react"

import { cn } from "@/lib/utils"

export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border-2 border-foreground bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 neobrutalism-shadow resize-y",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }

JavaScript: Copy this code into components/ui/textarea.jsx:

jsx

import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border-2 border-foreground bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 neobrutalism-shadow resize-y",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Textarea.displayName = "Textarea"

export { Textarea }

Usage

TypeScript:

tsx

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Enter your message" />
<Textarea rows={5} placeholder="Longer text area" />
<Textarea disabled placeholder="Disabled textarea" />

JavaScript:

jsx

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Enter your message" />
<Textarea rows={5} placeholder="Longer text area" />
<Textarea disabled placeholder="Disabled textarea" />

Make sure you also have the lib/utils.ts file with the cn helper function.

Examples

Message

Description

Disabled