Textarea
A multi-line recessed well with focus brightening and content-based growth in supporting browsers.
@emboss/textarea
Installation
pnpm dlx shadcn@latest add @emboss/textareaUsage
import { Textarea } from "@/components/ui/textarea";
export function Example() {
return <Textarea placeholder="Service notes" />;
}API reference
Textarea
Extends the native textarea element.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue / value / onChange | string / string / ChangeEventHandler | — | Standard controlled and uncontrolled usage. |
Source
View source — textarea.tsxHide source — textarea.tsx
import { cn } from "@/lib/utils";
/**
* A multi-line recessed well. Focus brightens the floor; the field grows
* with its content in browsers that support field-sizing.
*
* @example
* <Textarea placeholder="Service notes" />
*/
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
return (
<textarea
data-slot="textarea"
className={cn(
"[field-sizing:content] min-h-20 w-full min-w-0 rounded-sm bg-well px-3 py-2 text-sm text-ink shadow-deboss-1 focus-ring transition-[background-color,box-shadow] duration-(--duration-release) ease-(--ease-release) selection:bg-accent selection:text-accent-fg placeholder:text-ink-faint focus-visible:bg-surface-1 disabled:pointer-events-none disabled:opacity-50 aria-invalid:text-danger aria-invalid:shadow-deboss-2",
className,
)}
{...props}
/>
);
}
export { Textarea };