TextArea

Displays a form textarea or a component that looks like a textarea.
Default TextArea
Monospaced TextArea
Error TextArea
Success TextArea
Warning TextArea
import { TextArea } from "@ngrok/mantle/text-area";

<TextArea appearance="monospaced" placeholder="Tell us about your experience…" />
<TextArea placeholder="Tell us about your experience…" validation="error" /></code></pre></div></div></div></section><section class="mt-16 space-y-4"><h2 id="api" class="text-3xl font-medium">API Reference</h2><p class="text-xl text-body">The <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">TextArea</code> accepts the following props in addition to the<!-- --> <a class="cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-none focus-visible:ring focus-visible:ring-focus-accent" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">standard HTML textarea attributes</a>.</p><div class="overflow-hidden rounded-lg border border-gray-300"><table class="relative w-full caption-bottom overflow-auto text-sm"><thead class="bg-base [&_tr]:border-b"><tr class="border-b border-gray-300 hover:bg-gray-200/50 data-state-selected:bg-gray-200"><th class="text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">Prop</th><th class="text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">Type</th><th class="text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">Default</th><th class="text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0">Description</th></tr></thead><tbody class="[&_tr:last-child]:border-0 text-xs text-body"><tr class="border-b border-gray-300 hover:bg-gray-200/50 data-state-selected:bg-gray-200"><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono"><p class="flex items-center"><span class="token attr-name">appearance</span><button data-state="closed">?</button></p></td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono"><ul><li><span class="token attr-value">monospaced</span></li></ul></td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono">—</td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top"><p>Defines the visual style of the <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">TextArea</code>.</p></td></tr><tr class="border-b border-gray-300 hover:bg-gray-200/50 data-state-selected:bg-gray-200"><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono"><p class="flex items-center"><span class="token attr-name">validation</span><button data-state="closed">?</button></p></td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono"><ul><li><span class="token attr-value">error</span></li><li><span class="token attr-value">success</span></li><li><span class="token attr-value">warning</span></li><li><span class="text-purple-600">false</span></li><li><pre class="language-typescript"><code>() => "error" | "success" | "warning" | false</code></pre></li></ul></td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top font-mono">—</td><td class="p-4 [&:has([role=checkbox])]:pr-0 align-top space-y-2"><p>Use the <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">validation</code> prop to show if the textarea has a specific validation status. This will change the border and outline of the textarea.</p><p>The <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">false</code> type is useful when using short-circuiting logic so that you don't need to use a ternary with <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">undefined</code>.</p><p>Setting <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">validation</code> to <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">error</code> also sets<!-- --> <code class="rounded-md border border-card bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">aria-invalid</code>.</p></td></tr></tbody></table></div></section></div></article></div></main><script>((STORAGE_KEY, restoreKey) => {
    if (!window.history.state || !window.history.state.key) {
      let key = Math.random().toString(32).slice(2);
      window.history.replaceState({
        key
      }, "");
    }
    try {
      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
      let storedY = positions[restoreKey || window.history.state.key];
      if (typeof storedY === "number") {
        window.scrollTo(0, storedY);
      }
    } catch (error) {
      console.error(error);
      sessionStorage.removeItem(STORAGE_KEY);
    }
  })("positions", null)</script><link rel="modulepreload" href="/build/manifest-6065C115.js"/><link rel="modulepreload" href="/build/entry.client-7U7KOPJC.js"/><link rel="modulepreload" href="/build/_shared/chunk-GYWGVCDK.js"/><link rel="modulepreload" href="/build/_shared/chunk-W7WWMBNV.js"/><link rel="modulepreload" href="/build/_shared/chunk-YWR3I3HK.js"/><link rel="modulepreload" href="/build/_shared/chunk-QDA5CGMH.js"/><link rel="modulepreload" href="/build/_shared/chunk-CW4CYNLF.js"/><link rel="modulepreload" href="/build/_shared/chunk-76UFQ6EX.js"/><link rel="modulepreload" href="/build/_shared/chunk-V23JAKXS.js"/><link rel="modulepreload" href="/build/_shared/chunk-3H2WX7GY.js"/><link rel="modulepreload" href="/build/_shared/chunk-L47ZWINF.js"/><link rel="modulepreload" href="/build/_shared/chunk-HMR5GZMV.js"/><link rel="modulepreload" href="/build/_shared/chunk-VFSDHGSO.js"/><link rel="modulepreload" href="/build/_shared/chunk-SKS2LZFI.js"/><link rel="modulepreload" href="/build/_shared/chunk-U26H2Z27.js"/><link rel="modulepreload" href="/build/_shared/chunk-GV77FBIH.js"/><link rel="modulepreload" href="/build/_shared/chunk-ESCTYC3J.js"/><link rel="modulepreload" href="/build/_shared/chunk-AYKSRY6U.js"/><link rel="modulepreload" href="/build/_shared/chunk-JVI6HAJ4.js"/><link rel="modulepreload" href="/build/_shared/chunk-U4EZ5XQB.js"/><link rel="modulepreload" href="/build/_shared/chunk-GUGCMMTM.js"/><link rel="modulepreload" href="/build/_shared/chunk-UJZPAMNH.js"/><link rel="modulepreload" href="/build/_shared/chunk-4HVZSBTN.js"/><link rel="modulepreload" href="/build/_shared/chunk-VD2RB3LU.js"/><link rel="modulepreload" href="/build/_shared/chunk-JNRDFR2I.js"/><link rel="modulepreload" href="/build/_shared/chunk-6UZSQSIX.js"/><link rel="modulepreload" href="/build/_shared/chunk-D37W2CRT.js"/><link rel="modulepreload" href="/build/_shared/chunk-Y4SAL2RF.js"/><link rel="modulepreload" href="/build/_shared/chunk-6SM3FXOW.js"/><link rel="modulepreload" href="/build/_shared/chunk-77U5R4HK.js"/><link rel="modulepreload" href="/build/_shared/chunk-BZPESKWE.js"/><link rel="modulepreload" href="/build/_shared/chunk-BND6V4OG.js"/><link rel="modulepreload" href="/build/root-AFX3M6F6.js"/><link rel="modulepreload" href="/build/_shared/chunk-AJDRH3GF.js"/><link rel="modulepreload" href="/build/_shared/chunk-TJTYFUMZ.js"/><link rel="modulepreload" href="/build/_shared/chunk-5ST4ZWQ5.js"/><link rel="modulepreload" href="/build/_shared/chunk-4DZVNW5X.js"/><link rel="modulepreload" href="/build/_shared/chunk-4D27ZYQ4.js"/><link rel="modulepreload" href="/build/_shared/chunk-WOQ7PDP5.js"/><link rel="modulepreload" href="/build/_shared/chunk-AXVZYRS6.js"/><link rel="modulepreload" href="/build/routes/components.text-area-KJUNPADF.js"/><script>window.__remixContext = {"url":"/components/text-area","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false},"state":{"loaderData":{"root":{"currentVersion":"0.1.32","commitSha":"adf8b205c358dce22692acbebe88184d1ba8442a","deploymentId":"dpl_7HnxeuE7gJJHkwmnz3RCxg5YNcvj"},"routes/components.text-area":null},"actionData":null,"errors":null}};</script><script type="module" async="">import "/build/manifest-6065C115.js";
import * as route0 from "/build/root-AFX3M6F6.js";
import * as route1 from "/build/routes/components.text-area-KJUNPADF.js";
window.__remixRouteModules = {"root":route0,"routes/components.text-area":route1};

import("/build/entry.client-7U7KOPJC.js");</script></body></html>