Textarea

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

1
import { Textarea } from "@/components/ui/pxl/textarea"
2

3
export default function TextareaDemo() {
4
  return <Textarea placeholder="Type your message here." />
5
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/textarea

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { cn } from "@/lib/utils";
4

5
function Textarea({ className, ...props }: ComponentProps<"textarea">) {
6
  return (
7
    <div
8
      data-slot="textarea-wrapper"
9
      className={cn(
10
        "pr-1.5 pb-1.5 pixel-border pixel-color-input pixel-size-[3px] has-[textarea:focus-visible]:pixel-color-ring has-[textarea:disabled]:opacity-50 has-[textarea[aria-invalid=true]]:pixel-color-destructive",
11
        className,
12
      )}
13
    >
14
      <textarea
15
        data-slot="textarea"
16
        className="flex field-sizing-content min-h-16 w-full bg-transparent px-2.5 py-2 text-base transition-[color] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm"
17
        {...props}
18
      />
19
    </div>
20
  );
21
}
22

23
export { Textarea };

Update the import paths to match your project setup.

Usage

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

<Textarea />

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Button

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