Skip to content
jezuiMake it yours
← Components

Textarea

Textarea with thoughtful defaults, semantic styling, and editable source.

Open ↗

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/textarea.json

Use it

Scroll horizontally for long lines
"use client";
import { useState } from "react";
import { Avatar } from "@/components/jez-ui/ui/avatar";
import { Textarea } from "@/components/jez-ui/ui/textarea";
import { Button } from "@/components/jez-ui/ui/button";
import { ArrowUpRight } from "lucide-react";

export default function Example() {
  const [draft, setDraft] = useState("");
  const [notice, setNotice] = useState("");
  return (
    <>
      <div className="w-full max-w-lg">
        <div className="mb-4 flex items-center gap-3">
          <Avatar
            alt="Alex Morgan"
            fallback="AM"
            className="size-8"
          />
          <div>
            <h3 className="text-sm font-semibold">Add a project update</h3>
            <p className="text-xs text-muted-foreground">
              Shared with your team
            </p>
          </div>
        </div>
        <div className="overflow-hidden rounded-xl border border-border focus-within:border-primary/50 focus-within:ring-3 focus-within:ring-primary/8">
          <Textarea
            aria-label="Project description"
            placeholder="What changed? What’s next?"
            maxLength={500}
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            className="min-h-36 resize-none border-0 bg-transparent shadow-none focus-visible:ring-0"
          />
          <div className="flex items-center justify-between border-t border-border/50 bg-muted/20 px-3 py-2">
            <span className="text-xs text-muted-foreground tabular-nums">
              {draft.length} / 500
            </span>
            <Button
              size="sm"
              disabled={!draft.trim()}
              onClick={() => {
                setNotice("Update posted: " + draft);
                setDraft("");
              }}
            >
              Post update <ArrowUpRight size={14} />
            </Button>
          </div>
        </div>
      </div>
      <p role="status">{notice}</p>
    </>
  );
}

Props & types

Scroll horizontally for long lines
React.ComponentProps<"textarea">

Source

View 2 source files

registry/ui/textarea.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function Textarea({
  className,
  ...props
}: React.ComponentProps<"textarea">) {
  return (
    <textarea
      className={cn(
        "block min-h-32 w-full min-w-0 resize-y rounded-lg border border-border bg-background px-3.5 py-3 text-sm leading-relaxed shadow-[0_1px_2px_#00000004] transition-[border-color,box-shadow] placeholder:text-muted-foreground/70 hover:border-foreground/25 focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/10 aria-invalid:border-danger disabled:bg-muted/50 disabled:opacity-50",
        className,
      )}
      {...props}
    />
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →