{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "A multi-line text field built on Base UI's Field, so the label, help text and error message are connected to the control. Same border and focus ring as Input.",
  "categories": [
    "atom"
  ],
  "dependencies": [
    "@base-ui/react@^1.9.0"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/textarea.tsx",
      "type": "registry:ui",
      "target": "components/ui/textarea.tsx",
      "content": "/**\n * Textarea — a multi-line text field built on Base UI's Field, so the label,\n * description and error are wired to the control the same way `Input` wires\n * them.\n *\n * Base UI's `Input` is `Field.Control`; here `Field.Control` renders a\n * `<textarea>` through its `render` prop, which keeps the generated ids, the\n * `aria-*` links and the validation ref.\n *\n * a11y notes worth keeping:\n *\n *  - The border uses `--input`, held at 3:1 against the background.\n *  - `Field.Root invalid` marks the control `aria-invalid` and turns the\n *    border red for an error passed in from outside, such as one from a server.\n *  - \"required\" is spelled out in the label, as in `Input`.\n *  - At least 44px tall, and it can be resized vertically unless `resize` is\n *    `none`, so long answers stay readable without a scrollbar.\n *\n * Dependencies: @base-ui/react, react, @/lib/utils.\n */\n\nimport { Field } from \"@base-ui/react/field\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps extends ComponentPropsWithoutRef<\"textarea\"> {\n  /** Required. Use `hideLabel` if it should not be visible. */\n  label: ReactNode\n  /** Hides the label visually but keeps it for screen readers. */\n  hideLabel?: boolean\n  /** Help text below the field. It is linked to the field for you. */\n  description?: ReactNode\n  /** Error message. Marks the field invalid and is announced with it. */\n  error?: ReactNode\n  /** Visible lines of text. */\n  rows?: number\n  /** `vertical` lets the user drag the height; `none` fixes it. */\n  resize?: \"vertical\" | \"none\"\n  /** Classes for the outer Field.Root. */\n  className?: string\n  /** Classes for the `<textarea>` itself. */\n  textareaClassName?: string\n}\n\nexport function Textarea({\n  label,\n  hideLabel = false,\n  description,\n  error,\n  rows = 4,\n  resize = \"vertical\",\n  className,\n  textareaClassName,\n  name,\n  value,\n  defaultValue,\n  disabled,\n  required,\n  ...props\n}: TextareaProps) {\n  return (\n    <Field.Root\n      name={name}\n      invalid={Boolean(error)}\n      className={cn(\"flex w-full flex-col gap-1.5\", className)}\n    >\n      <Field.Label\n        className={cn(\"text-foreground text-sm font-medium\", hideLabel && \"sr-only\")}\n      >\n        {label}\n        {required ? <span className=\"text-muted-foreground\"> (required)</span> : null}\n      </Field.Label>\n\n      {/* Field reads the form props; the rest are textarea attributes. */}\n      <Field.Control\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        disabled={disabled}\n        required={required}\n        render={<textarea rows={rows} {...props} />}\n        className={cn(\n          \"border-input bg-background text-foreground placeholder:text-muted-foreground\",\n          \"min-h-11 w-full rounded-md border px-3.5 py-2.5 text-base leading-6\",\n          \"duration-facade-fast ease-facade-out transition-[border-color,box-shadow]\",\n          \"focus-visible:ring-ring focus-visible:border-ring outline-none focus-visible:ring-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-60\",\n          \"data-[invalid]:border-destructive data-[invalid]:focus-visible:ring-destructive\",\n          resize === \"none\" ? \"resize-none\" : \"resize-y\",\n          textareaClassName,\n        )}\n      />\n\n      {description ? (\n        <Field.Description className=\"text-muted-foreground text-pretty text-sm\">\n          {description}\n        </Field.Description>\n      ) : null}\n\n      {/* `match` shows an error from outside, which Base UI's own validity\n          state knows nothing about. Without one, no children are passed, so\n          Base UI shows the browser's own message for a failed check. */}\n      <Field.Error\n        className=\"text-destructive text-pretty text-sm\"\n        match={Boolean(error) || undefined}\n        {...(error ? { children: error } : {})}\n      />\n    </Field.Root>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/textarea"
}