Textarea

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

import { Textarea } from "@chadcn/ui"

export function TextareaDemo() {
  return (
    <div className="w-full max-w-sm">
      <Textarea placeholder="Type your message here." />
    </div>
  )
}

How it works

This component is currently identical to the shadcn/ui original. Chad behavior coming soon.

Installation

Coming SoonPackage not yet published on npm.

pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { Textarea } from "@chadcn/ui"

<Textarea />

Coming SoonPackage not yet published on npm.

Examples

With Label

Pair with Label to create a textarea with a label and description.

Your message

Your message will be sent to our support team.

import { Textarea } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function TextareaWithLabel() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <Label htmlFor="message">Your message</Label>
      <Textarea id="message" placeholder="Type your message here." />
      <p className="text-sm text-muted-foreground">
        Your message will be sent to our support team.
      </p>
    </div>
  )
}

Disabled

Use the disabled prop to disable the textarea.

import { Textarea } from "@chadcn/ui"

export function TextareaDisabled() {
  return (
    <div className="w-full max-w-sm">
      <Textarea placeholder="Type your message here." disabled />
    </div>
  )
}

With Button

Pair with Button to create a textarea with a submit button.

import { Textarea } from "@chadcn/ui"
import { Button } from "@chadcn/ui"

export function TextareaWithButton() {
  return (
    <div className="w-full max-w-sm space-y-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}