Textarea

A multi-line text input for longer-form content.

export default function TextareaHero() {
  return (
    <Field name="bio" className="w-64">
      <FieldLabel>Bio</FieldLabel>
      <Textarea placeholder="Tell us about yourself." />
    </Field>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/textarea.json"

Usage

import { Textarea } from '@/registry/ui/textarea';

<Textarea placeholder="Write something..." />;

Examples

Variant

The variant prop controls the visual style of the textarea.

export function TextareaSurface() {
  return <Textarea placeholder="Write something..." />;
}

Manual resize

Set autoResize={false} to disable auto-grow and let the user resize via the drag handle. Note that field-sizing: content requires a modern browser — autoResize defaults to true but falls back gracefully where the property is unsupported.

export default function TextareaManualResize() {
  return <Textarea autoResize={false} placeholder="Drag to resize..." />;
}

With label

Use Field and FieldLabel to associate a label with the textarea.

export default function TextareaWithLabel() {
  return (
    <Field name="message" className="w-64">
      <FieldLabel>Message</FieldLabel>
      <Textarea placeholder="Write your message..." />
    </Field>
  );
}

With button

Compose with Button inside a Field to add a submit action.

export default function TextareaWithButton() {
  return (
    <Field name="comment" className="flex w-64 flex-col gap-2">
      <FieldLabel>Comment</FieldLabel>
      <Textarea placeholder="Leave a comment..." />
      <Button className="self-end">Submit</Button>
    </Field>
  );
}

API Reference

PropTypeDefault
variant"surface" | "outline" | "soft""surface"
autoResizebooleantrue

All other props are forwarded to the underlying <textarea> element.