GitHub

Textarea

PreviousNext

Displays a form textarea or a component that looks like a textarea.

Loading
Loading...
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/textarea"

Usage

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

Examples

Default

Loading
Loading...
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

Disabled

Loading
Loading...
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaDisabled() {
  return (
    <Field data-disabled>
      <FieldLabel htmlFor="textarea-disabled">Message</FieldLabel>
      <Textarea
        disabled
        id="textarea-disabled"
        placeholder="Type your message here."
      />
    </Field>
  );
}

With Label

Loading
Loading...
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

With Text

Loading
Loading...
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}

With Button

Loading
Loading...
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
 
export function TextareaButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  );
}