Textarea

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

import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaBasic() {
  return (
    <Field className="max-w-md">
      <FieldLabel>Description</FieldLabel>
      <Textarea
        placeholder="What is this project about?"
        defaultValue="Refresh the marketing site with the new brand, rebuild the pricing page and move the blog to the new CMS."
      />
    </Field>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add textarea
pnpm dlx shadcn@latest add @jarvis/textarea

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function NotesField() {
  return (
    <Field>
      <FieldLabel>Notes</FieldLabel>
      <Textarea />
    </Field>
  );
}

The textarea grows with its content. Cap it with a class such as max-h-60. Like an input, it needs a label, such as a FieldLabel in a Field, or an aria-label.

Examples

Invalid

Set invalid on its Field to mark the textarea as invalid. On its own, set aria-invalid.

import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaInvalid() {
  return (
    <Field invalid className="max-w-md">
      <FieldLabel>Feedback</FieldLabel>
      <Textarea defaultValue="Too short" />
    </Field>
  );
}

Disabled

import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDisabled() {
  return (
    <Field className="max-w-md">
      <FieldLabel>Comments</FieldLabel>
      <Textarea disabled placeholder="Comments are turned off" />
    </Field>
  );
}

Props

Part	Extends
Textarea	<textarea>

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.