Components / Primitives

Textarea

A multi-line text field that grows with its content.

pnpm exec shadcn add @intelligo/textarea

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

Nothing else from the registry.

used by these pages

Chat

more in primitives

Alert dialog, Button, Dialog, Dropdown menu, Input, Popover, Progress, Select, Sheet, Sidebar, Tabs, Tooltip, Checkbox, Radio group, Switch, Collapsible, Command

Source

What shadcn add writes to components/ui/textarea.tsx. It is yours from then on.

/*
 * The textarea: the input's field, grown to its content.
 */

import * as React from "react";

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

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base transition-[border-color,box-shadow,background-color] duration-normal ease-standard outline-none placeholder:text-muted-foreground hover:border-ring/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm",
        className
      )}
      {...props}
    />
  );
}

export { Textarea };

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started