Textarea

Multi-line text input.

stable

Preview

Code

tsx

import { Textarea } from "@/components/ui/textarea";

export function Example() {
  return <Textarea placeholder="Describe the incident..." rows={4} />;
}

Props

Prop	Type	Default	Description
rows	`number`	—	Suggested visible height in rows. Users can still resize.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Spreads all `<textarea>` props. Minimum height is 80px. Forwards `ref` to the textarea.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/textarea.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type TextareaHTMLAttributes, forwardRef } from "react";

export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => (
    <textarea
      ref={ref}
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm",
        "placeholder:text-fg-subtle",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    />
  ),
);
Textarea.displayName = "Textarea";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmTextarea (extends TextArea). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmTextarea;

PrizmTextarea()
PrizmTextarea(String text)
PrizmTextarea(String text, String promptText)

Prop	Type	Default	Description
promptText	`StringProperty`	—	Placeholder shown when empty.
prefRowCount	`int`	—	Suggested visible height in rows.

Thin subclass of TextArea; styling from the .text-area rules in prizm.css. Mirrors components/ui/textarea.tsx.