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="space-y-4"><h2 id="api" class="text-3xl font-medium">API Reference</h2><p class="font-body text-body text-xl">The <code class="border-card rounded-md border 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="data-state-selected:bg-gray-200 border-b border-gray-300 hover:bg-gray-200/50"><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 font-body text-body text-xs"><tr class="data-state-selected:bg-gray-200 border-b border-gray-300 hover:bg-gray-200/50"><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="border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">TextArea</code>.</p></td></tr><tr class="data-state-selected:bg-gray-200 border-b border-gray-300 hover:bg-gray-200/50"><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="border-card rounded-md border 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="border-card rounded-md border 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="border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">undefined</code>.</p><p>Setting <code class="border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">validation</code> to <code class="border-card rounded-md border bg-gray-500/5 px-1 py-0.5 font-mono text-[0.8em]">error</code> also sets<!-- --> <code class="border-card rounded-md border 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="/assets/manifest-6fe6ebec.js"/><link rel="modulepreload" href="/assets/entry.client-B6BRiplr.js"/><link rel="modulepreload" href="/assets/jsx-runtime-BGCw9yFu.js"/><link rel="modulepreload" href="/assets/index-BjLclD8r.js"/><link rel="modulepreload" href="/assets/components-BaK_1Y38.js"/><link rel="modulepreload" href="/assets/Check-Dv5tP1VK.js"/><link rel="modulepreload" href="/assets/Sun-CLMVxK8V.js"/><link rel="modulepreload" href="/assets/X-CNiVD5EF.js"/><link rel="modulepreload" href="/assets/cx-D2sQX_fw.js"/><link rel="modulepreload" href="/assets/theme-provider-VziY6s3J.js"/><link rel="modulepreload" href="/assets/button-BsWu8Lx4.js"/><link rel="modulepreload" href="/assets/select-D_Lmsm5U.js"/><link rel="modulepreload" href="/assets/tooltip-C9sgJURZ.js"/><link rel="modulepreload" href="/assets/CircleNotch-B2RH-8Wx.js"/><link rel="modulepreload" href="/assets/index-DopmORUs.js"/><link rel="modulepreload" href="/assets/index-Bb4qSo10.js"/><link rel="modulepreload" href="/assets/icon-AW8AIscZ.js"/><link rel="modulepreload" href="/assets/_icon-base-CLqeRrP8.js"/><link rel="modulepreload" href="/assets/booleanish-ff-PPuh4.js"/><link rel="modulepreload" href="/assets/CaretDown-CcjdEjUB.js"/><link rel="modulepreload" href="/assets/index-DDgfMACy.js"/><link rel="modulepreload" href="/assets/index-D5X1iLgV.js"/><link rel="modulepreload" href="/assets/index-Vo3vaQJu.js"/><link rel="modulepreload" href="/assets/index-CibKwe_n.js"/><link rel="modulepreload" href="/assets/Combination-mH6ay9uY.js"/><link rel="modulepreload" href="/assets/index-ulm5V7sx.js"/><link rel="modulepreload" href="/assets/index-pPg3nb6w.js"/><link rel="modulepreload" href="/assets/index-CqScgQu4.js"/><link rel="modulepreload" href="/assets/index-DZAQ7xhd.js"/><link rel="modulepreload" href="/assets/compose-refs-B6sdyujG.js"/><link rel="modulepreload" href="/assets/separator-BjRx_MJW.js"/><link rel="modulepreload" href="/assets/root-lcN8HS0B.js"/><link rel="modulepreload" href="/assets/example-BhGdSz95.js"/><link rel="modulepreload" href="/assets/props-table-D1QM512Z.js"/><link rel="modulepreload" href="/assets/label-BBjUvdBM.js"/><link rel="modulepreload" href="/assets/fmt-code-Cyt2m4io.js"/><link rel="modulepreload" href="/assets/inline-code-BowPPUT-.js"/><link rel="modulepreload" href="/assets/anchor-HS6T6yQ-.js"/><link rel="modulepreload" href="/assets/table-D70cg_5E.js"/><link rel="modulepreload" href="/assets/components.text-area-wS-l5Sdk.js"/><script>window.__remixContext = {"basename":"/","future":{"v3_fetcherPersist":true,"v3_relativeSplatPath":true,"v3_throwAbortReason":true,"unstable_singleFetch":false,"unstable_lazyRouteDiscovery":false,"unstable_optimizeDeps":true},"isSpaMode":false,"state":{"loaderData":{"root":{"currentVersion":"0.4.0","commitSha":"834f18b7012318513759015e301519aedabbf0b5","deploymentId":"dpl_14hUvoS8bz2CPXZgAGVxFY6du9K5"},"routes/components.text-area":null},"actionData":null,"errors":null}};</script><script type="module" async="">import "/assets/manifest-6fe6ebec.js";
import * as route0 from "/assets/root-lcN8HS0B.js";
import * as route1 from "/assets/components.text-area-wS-l5Sdk.js";

window.__remixRouteModules = {"root":route0,"routes/components.text-area":route1};

import("/assets/entry.client-B6BRiplr.js");</script></body></html>