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.TextareaHTMLAttributes<HTMLTextAreaElement>

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.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  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 →