Textarea
Understand the design system and contribute to it
Component preview
The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.
Preview
Available props
Toggle to update the preview
Disabled
disabled: true
Read only
readOnly: true
Invalid
aria-invalid: true
Prop reference
Auto-generated from the component source
Textarea
className
/**
* ⚠️ MODIFIED FROM ORIGINAL UI LIBRARY
*
* Changed from regular function component to React.forwardRef to support:
* - @mention functionality in AI Builder chat
* - Direct DOM access for caret position detection
* - Programmatic text insertion at cursor position
*
* This is a minimal, necessary change that preserves all original styling and behavior.
*/
import * as React from "react";
import { cn } from "@/lib/utils";
const Textarea = React.forwardRef<
HTMLTextAreaElement,
React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
return (
<textarea
ref={ref}
data-slot="textarea"
className={cn(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
{...props}
/>
);
});
Textarea.displayName = "Textarea";
export { Textarea };