Textarea

Campo multiline com label, helper, error e resize.
Estados

Default
Com helperQuanto mais detalhes, melhor.
Com erroMínimo de 20 caracteres.
Disabled
Com Label externo

Observações
Rows controlado

Compacto (rows=2)
Expandido (rows=6)
Uso

Básico
import { Textarea } from "@camillodev/ui"

</code></pre></div></div></div><div><p class="text-xs text-[var(--color-text-muted)] mb-2">Com helper + erro</p><div class="relative group rounded-[var(--radius-md)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface)]"><button type="button" aria-label="Copiar código" class="absolute top-2 right-2 inline-flex items-center justify-center h-8 w-8 rounded-md bg-[var(--color-bg)] border border-[var(--color-border)] opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity hover:bg-[var(--color-surface-muted)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4 text-[var(--color-text-muted)]" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><div class="text-sm font-mono leading-relaxed [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:bg-transparent"><pre><code><Textarea
  label="Feedback"
  placeholder="Descreva o problema…"
  helperText="Quanto mais detalhes, melhor."
/>

<Textarea
  label="Comentário"
  error="Mínimo de 20 caracteres."
/></code></pre></div></div></div><div><p class="text-xs text-[var(--color-text-muted)] mb-2">Com Label externo + rows</p><div class="relative group rounded-[var(--radius-md)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface)]"><button type="button" aria-label="Copiar código" class="absolute top-2 right-2 inline-flex items-center justify-center h-8 w-8 rounded-md bg-[var(--color-bg)] border border-[var(--color-border)] opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity hover:bg-[var(--color-surface-muted)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4 text-[var(--color-text-muted)]" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button><div class="text-sm font-mono leading-relaxed [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:bg-transparent"><pre><code>import { Label, Textarea } from "@camillodev/ui"

<Label htmlFor="obs">Observações</Label>
<Textarea id="obs" rows={4} placeholder="Adicione observações…" /></code></pre></div></div></div></div></section></main><!--$--><!--/$--></main></div></div><script src="/_next/static/chunks/0jwleahn3j1~x.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[75902,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"ThemeProvider\"]\n3:I[47263,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"MobileNavProvider\"]\n4:I[33320,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"Sidebar\"]\n5:I[51308,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"Header\"]\n6:I[74727,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"default\"]\n7:I[43500,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"default\"]\n8:I[2516,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"ClientPageRoot\"]\n9:I[58977,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\",\"/_next/static/chunks/07t4ji5o8loch.js\",\"/_next/static/chunks/0j~n57yvgoy94.js\"],\"default\",1]\nc:I[19044,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"OutletBoundary\"]\nd:\"$Sreact.suspense\"\n10:I[19044,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"ViewportBoundary\"]\n12:I[19044,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"MetadataBoundary\"]\n14:I[74797,[\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"/_next/static/chunks/0-zs0-44cnwd..js\",\"/_next/static/chunks/0pnj~8020j2bt.js\",\"/_next/static/chunks/13~0kc0~q69hv.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/03aedbyza248a.css\",\"style\"]\n:HC[\"/\",\"\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"components\",\"textarea\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"components\",{\"children\":[\"textarea\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/03aedbyza248a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0vjti3-w0tg9a.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0f3d9~u_qisn~.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0-zs0-44cnwd..js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0pnj~8020j2bt.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/13~0kc0~q69hv.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"pt-BR\",\"className\":\"theme-education\",\"children\":[\"$\",\"body\",null,{\"className\":\"antialiased\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-screen overflow-hidden\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"div\",null,{\"className\":\"flex-1 flex flex-col min-w-0\",\"children\":[[\"$\",\"$L5\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 overflow-y-auto bg-[var(--color-surface)]\",\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]]}]}]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L8\",null,{\"Component\":\"$9\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@a\",\"$@b\"]}}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/07t4ji5o8loch.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0j~n57yvgoy94.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$d\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@e\"}]}]]}],{},null,false,null]},null,false,\"$@f\"]},null,false,\"$@f\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L10\",null,{\"children\":\"$L11\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L12\",null,{\"children\":[\"$\",\"$d\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L13\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$14\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/03aedbyza248a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"kjxrCWiYsvr8Z1Wtm4bwg\"}\n"])</script><script>self.__next_f.push([1,"15:[]\nf:\"$W15\"\na:{}\nb:\"$0:f:0:1:1:children:1:children:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"11:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"e:null\n13:[[\"$\",\"title\",\"0\",{\"children\":\"ds-impactx · Education DS\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Impact X Design System factory — Education DS first\"}]]\n"])</script></body></html>