Forms
Textarea
The multi-line field; it grows with its content (field-sizing: content) from a 64px minimum.
Guidelines#
Use it for notes, messages, prompts to an agent and any answer longer than a line. Same border, radius, focus, invalid and disabled treatment as Input, with 8px vertical padding.
What you provide: id, a Label, value or defaultValue, an example placeholder ("Tone, offers to mention, topics to avoid…"), and a max height through className if the layout needs a ceiling.
Don't use it for single values.
Facts#
| Group | Forms |
|---|---|
| Product | Max |
| Global | window.DigitalCrew.Textarea |
| Source | max-agent: src/components/ui/textarea.tsx |
| Import in the app | import { Textarea } from "@/components/ui/textarea"; |
API#
TypeScript declarations emitted from src/components/ui/textarea.tsx (the module also exports its other parts).
declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): any;
export { Textarea };Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<div id="root" class="p-6"></div>
<script>
(function () {
var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
return h("div", { className: "grid grid-cols-2 gap-8" },
h("div", { className: "flex flex-col gap-2" },
h(DC.Label, { htmlFor: "ta-1" }, "Notes for Max"),
h(DC.Textarea, { id: "ta-1", placeholder: "Tone, offers to mention, topics to avoid…" }),
h("p", { className: "text-sm text-muted-foreground" }, "Max reads this before every draft.")),
h("div", { className: "flex flex-col gap-2" },
h(DC.Label, { htmlFor: "ta-2" }, "Follow-up message"),
h(DC.Textarea, { id: "ta-2", "aria-invalid": true, defaultValue: "Hi {{firstName}}, following up on my note from Tuesday about" }),
h("p", { className: "text-sm text-destructive" }, "Finish the sentence before scheduling.")));
}
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>