Blode UI
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 const TextareaDisabled = () => (
  <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 const TextareaButton = () => (
  <div className="grid w-full gap-2">
    <Textarea placeholder="Type your message here." />
    <Button>Send message</Button>
  </div>
);