Textarea

Use Textarea for notes, descriptions, or other text that can span several lines.

Preview

Investment notes and input states

Compare an editable note with a 240-character limit against explicitly invalid and disabled note fields.

Investment note

Validation state

Disabled

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/textarea

Install the shared base once, then add components and their dependencies with the CLI.

Investment notes and input states

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea

Registry JSON

Usage

Connect a visible Label, set name and rows, and add constraints or supporting text for the task. Use Input for short, single-line values.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project description</Label>
      <Textarea id={id} name="description" placeholder="Describe your project" rows={4} />
    </div>
  );
}

API Reference

Forwards every native textarea attribute while styling minimum height, vertical resizing, focus, and aria-invalid states with neumorphic tokens.

Component	Prop	Type	Default	Description
`Textarea`	`value / defaultValue`	`string`	`—`	The controlled text or initial uncontrolled text.
`Textarea`	`rows`	`number`	`—`	The initial number of visible rows.
`Textarea`	`placeholder`	`string`	`—`	A short example that helps communicate the expected input format.
`Textarea`	`disabled / required / readOnly`	`boolean`	`false`	Sets native input constraints.
`Textarea`	`aria-invalid`	`boolean \| string`	`—`	Enables the error border and focus ring.

Preview

Investment notes and input states

Installation

Usage

API Reference

Accessibility