Forms

Textarea

Name: VEXA
Author: Valfiguer

Server-safe

A multi-line text field.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Playground

Adjust the props and copy the matching JSX.

Playground

placeholder

disabled

textarea.tsx

<Textarea placeholder="Tell us about your team" />

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/textarea.json

Installs to components/vexa/textarea.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/textarea.tsx

import type * as React from "react";

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

/**
 * Textarea — a multi-line text field.
 *
 * RSC-safe as static markup; add `onChange`/controlled state from a Client
 * Component. States covered: default, focus-visible, disabled, read-only, and
 * invalid (set `aria-invalid` — validity is not communicated by color alone,
 * the border and ring both change). Always pair with a `<Label htmlFor>`.
 */
export function Textarea({
  className,
  ...props
}: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex min-h-20 w-full resize-y rounded-vexa-md border border-vexa-input bg-vexa-surface-raised px-3 py-2 text-sm text-vexa-foreground shadow-vexa-sm",
        "transition-[color,box-shadow,border-color] duration-[var(--vexa-duration-fast)]",
        "placeholder:text-vexa-muted-foreground",
        "outline-none focus-visible:border-vexa-focus focus-visible:ring-2 focus-visible:ring-vexa-ring focus-visible:ring-offset-1 focus-visible:ring-offset-vexa-background",
        "disabled:cursor-not-allowed disabled:opacity-60",
        "read-only:bg-vexa-muted read-only:text-vexa-muted-foreground",
        "aria-[invalid=true]:border-vexa-danger aria-[invalid=true]:focus-visible:ring-vexa-danger",
        className,
      )}
      {...props}
    />
  );
}

Registry JSONr/textarea.json

r/textarea.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "A multi-line text field.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/textarea.tsx",
      "type": "registry:ui",
      "target": "components/vexa/textarea.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Textarea — a multi-line text field.\n *\n * RSC-safe as static markup; add `onChange`/controlled state from a Client\n * Component. States covered: default, focus-visible, disabled, read-only, and\n * invalid (set `aria-invalid` — validity is not communicated by color alone,\n * the border and ring both change). Always pair with a `<Label htmlFor>`.\n */\nexport function Textarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex min-h-20 w-full resize-y rounded-vexa-md border border-vexa-input bg-vexa-surface-raised px-3 py-2 text-sm text-vexa-foreground shadow-vexa-sm\",\n        \"transition-[color,box-shadow,border-color] duration-[var(--vexa-duration-fast)]\",\n        \"placeholder:text-vexa-muted-foreground\",\n        \"outline-none focus-visible:border-vexa-focus focus-visible:ring-2 focus-visible:ring-vexa-ring focus-visible:ring-offset-1 focus-visible:ring-offset-vexa-background\",\n        \"disabled:cursor-not-allowed disabled:opacity-60\",\n        \"read-only:bg-vexa-muted read-only:text-vexa-muted-foreground\",\n        \"aria-[invalid=true]:border-vexa-danger aria-[invalid=true]:focus-visible:ring-vexa-danger\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe-markup",
    "cssVars": [
      "--vexa-input",
      "--vexa-surface-raised",
      "--vexa-foreground",
      "--vexa-muted",
      "--vexa-muted-foreground",
      "--vexa-focus",
      "--vexa-ring",
      "--vexa-danger",
      "--vexa-background"
    ],
    "a11y": "Pair with <Label htmlFor>. Invalid state uses aria-invalid and changes border + ring (not color alone). Read-only and disabled states styled.",
    "example": "<Textarea id=\"bio\" placeholder=\"Tell us about your team\" />",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Details

Accessibility

Pair with <Label htmlFor>. Invalid state uses aria-invalid and changes border + ring (not color alone). Read-only and disabled states styled.

Usage

Multi-line text entry (messages, descriptions). Same labelling and error contract as `Input`.

Anatomy

Textarea: Styled native `<textarea>`; forwards every native prop and the ref.

Accessibility

Native textarea semantics. `aria-invalid` drives the error style (border + ring, not color alone).

Keyboard

Key	Action
`Native`	Standard multi-line editing

Focus: Visible focus ring; read-only and disabled states are styled distinctly.

Pair with a visible Label (WCAG 3.3.2); wire hints/errors through `Field`.

Guidelines

Do

Pair with a `<Label htmlFor>`.
Allow resize where it helps the user.
Use `Field` to wire hint and error text.

Don't

Don't use the placeholder as the label.
Don't convey invalid by color alone.
Don't fix a tiny height that clips typed content.

Edit this page

Was this page helpful?

Stored locally in this browser. No account or server needed.