TWIGS

Textarea

Displays a form textarea or a component that looks like a textarea.

Playground

Message

Installation

Install in any React + Tailwind project:

$npx shadcn@latest add https://twigs.globirdenergy.com.au/r/textarea.json

Source

The exact file the registry serves to consumers.

import * as React from 'react';
import { cn } from '@/lib/utils';

const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
  ({ className, ...props }, ref) => (
    <textarea
      ref={ref}
      className={cn(
        // Spec source: Figma "APP Re-design Phase 1" → page "Textarea ✅" (rad 12, pad L28 T20)
        'flex min-h-[80px] w-full rounded-xl border border-input bg-background px-7 py-5 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',
        className,
      )}
      {...props}
    />
  ),
);
Textarea.displayName = 'Textarea';

export { Textarea };