Textarea.

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDemo() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="ta-guestbook">Sign the guestbook</Label>
      <Textarea id="ta-guestbook" placeholder="Left a turtle mining at spawn. Say hi." />
      <p className="text-xs text-muted-foreground">Shown on the site's guestbook page.</p>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add textarea

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/textarea. See Installation if your project is not set up yet.

Manually

1. Copy the source into your project

   components/ui/textarea.tsx

   import * as React from "react";
   
   import { cn } from "@/lib/utils";
   
   function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     return (
       <textarea
         data-slot="textarea"
         className={cn(
           "flex field-sizing-content min-h-20 w-full min-w-0 rounded-md border border-input bg-background/40 px-3 py-2 text-sm leading-relaxed text-foreground transition-[border-color,box-shadow] outline-none placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground",
           "hover:border-muted-foreground/60 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring/25",
           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
       />
     );
   }
   
   export { Textarea };

2. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

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

<Textarea placeholder="Sign the guestbook" />

Examples#

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaStates() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <div className="grid gap-2">
        <Label htmlFor="ta-invalid">Startup script</Label>
        <Textarea id="ta-invalid" aria-invalid defaultValue={'shell.run("hub serve"'} className="font-mono text-[13px]" />
        <p className="text-xs text-destructive">Line 1: missing closing parenthesis.</p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="ta-disabled">Server notes</Label>
        <Textarea id="ta-disabled" disabled defaultValue="Read only while the server is syncing." />
      </div>
    </div>
  );
}