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="scrollbar overflow-x-scroll 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><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><script>((storageKey2, 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(storageKey2) || "{}");
      let storedY = positions[restoreKey || window.history.state.key];
      if (typeof storedY === "number") {
        window.scrollTo(0, storedY);
      }
    } catch (error) {
      console.error(error);
      sessionStorage.removeItem(storageKey2);
    }
  })("react-router-scroll-positions", null)</script><link rel="modulepreload" href="/assets/entry.client-BSBYkDDb.js"/><link rel="modulepreload" href="/assets/chunk-GNGMS2XR-tvBkBdX-.js"/><link rel="modulepreload" href="/assets/index-OLbSb_kN.js"/><link rel="modulepreload" href="/assets/root-DkwDTdvY.js"/><link rel="modulepreload" href="/assets/svg-only-BUl2-q3t.js"/><link rel="modulepreload" href="/assets/Sun-B51QILT-.js"/><link rel="modulepreload" href="/assets/X-By3WG3_2.js"/><link rel="modulepreload" href="/assets/theme-provider-BHzrd78s.js"/><link rel="modulepreload" href="/assets/icon-button-sCNRvfLa.js"/><link rel="modulepreload" href="/assets/select-BsONLfUH.js"/><link rel="modulepreload" href="/assets/Check-C61ws_bl.js"/><link rel="modulepreload" href="/assets/tooltip-CxiMdr0U.js"/><link rel="modulepreload" href="/assets/toast-DiU7Qyz8.js"/><link rel="modulepreload" href="/assets/CircleNotch-DG6MbFtK.js"/><link rel="modulepreload" href="/assets/index-CE3MA1GC.js"/><link rel="modulepreload" href="/assets/booleanish-wr2C3Kel.js"/><link rel="modulepreload" href="/assets/CaretDown-Cdcc4ITP.js"/><link rel="modulepreload" href="/assets/index-JQ13VXdT.js"/><link rel="modulepreload" href="/assets/index-BkqdDNTP.js"/><link rel="modulepreload" href="/assets/index-BBZS1I9Y.js"/><link rel="modulepreload" href="/assets/index-Ca6J9wKj.js"/><link rel="modulepreload" href="/assets/Combination-Iic3C66r.js"/><link rel="modulepreload" href="/assets/index-DH_NfyU-.js"/><link rel="modulepreload" href="/assets/index-DqrSqRKY.js"/><link rel="modulepreload" href="/assets/floating-ui.dom-DX5uHWjD.js"/><link rel="modulepreload" href="/assets/index-CJfz8w9W.js"/><link rel="modulepreload" href="/assets/index-B-KCoUPJ.js"/><link rel="modulepreload" href="/assets/index-DwMeMh8f.js"/><link rel="modulepreload" href="/assets/index-CanTqDgA.js"/><link rel="modulepreload" href="/assets/compose-refs-CxAiHrIB.js"/><link rel="modulepreload" href="/assets/separator-BeGNn2sY.js"/><link rel="modulepreload" href="/assets/index-B4MZeaCk.js"/><link rel="modulepreload" href="/assets/WarningDiamond-CPCNiIf6.js"/><link rel="modulepreload" href="/assets/Info-BiaadtDX.js"/><link rel="modulepreload" href="/assets/components.text-area-lp0qP-mE.js"/><link rel="modulepreload" href="/assets/example-DtY9XEO5.js"/><link rel="modulepreload" href="/assets/page-header-DdCP7IhS.js"/><link rel="modulepreload" href="/assets/props-table-DeHsdDoA.js"/><link rel="modulepreload" href="/assets/label-CHELpdMz.js"/><link rel="modulepreload" href="/assets/fmt-code-B3xTb7Sp.js"/><link rel="modulepreload" href="/assets/inline-code-DVVgtuM_.js"/><link rel="modulepreload" href="/assets/anchor-CyTXZvEQ.js"/><link rel="modulepreload" href="/assets/table-DIb4mLlJ.js"/><script>window.__reactRouterContext = {"basename":"/","future":{"unstable_middleware":false,"unstable_optimizeDeps":false,"unstable_splitRouteModules":false,"unstable_viteEnvironmentApi":false},"ssr":true,"isSpaMode":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script><script type="module" async="">;
import * as route0 from "/assets/root-DkwDTdvY.js";
import * as route1 from "/assets/components.text-area-lp0qP-mE.js";
  window.__reactRouterManifest = {
  "entry": {
    "module": "/assets/entry.client-BSBYkDDb.js",
    "imports": [
      "/assets/chunk-GNGMS2XR-tvBkBdX-.js",
      "/assets/index-OLbSb_kN.js"
    ],
    "css": []
  },
  "routes": {
    "root": {
      "id": "root",
      "path": "",
      "hasAction": false,
      "hasLoader": true,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/root-DkwDTdvY.js",
      "imports": [
        "/assets/chunk-GNGMS2XR-tvBkBdX-.js",
        "/assets/index-OLbSb_kN.js",
        "/assets/svg-only-BUl2-q3t.js",
        "/assets/Sun-B51QILT-.js",
        "/assets/X-By3WG3_2.js",
        "/assets/theme-provider-BHzrd78s.js",
        "/assets/icon-button-sCNRvfLa.js",
        "/assets/select-BsONLfUH.js",
        "/assets/Check-C61ws_bl.js",
        "/assets/tooltip-CxiMdr0U.js",
        "/assets/toast-DiU7Qyz8.js",
        "/assets/CircleNotch-DG6MbFtK.js",
        "/assets/index-CE3MA1GC.js",
        "/assets/booleanish-wr2C3Kel.js",
        "/assets/CaretDown-Cdcc4ITP.js",
        "/assets/index-JQ13VXdT.js",
        "/assets/index-BkqdDNTP.js",
        "/assets/index-BBZS1I9Y.js",
        "/assets/index-Ca6J9wKj.js",
        "/assets/Combination-Iic3C66r.js",
        "/assets/index-DH_NfyU-.js",
        "/assets/index-DqrSqRKY.js",
        "/assets/floating-ui.dom-DX5uHWjD.js",
        "/assets/index-CJfz8w9W.js",
        "/assets/index-B-KCoUPJ.js",
        "/assets/index-DwMeMh8f.js",
        "/assets/index-CanTqDgA.js",
        "/assets/compose-refs-CxAiHrIB.js",
        "/assets/separator-BeGNn2sY.js",
        "/assets/index-B4MZeaCk.js",
        "/assets/WarningDiamond-CPCNiIf6.js",
        "/assets/Info-BiaadtDX.js"
      ],
      "css": [
        "/assets/root-jCugNKi1.css"
      ]
    },
    "routes/components.text-area": {
      "id": "routes/components.text-area",
      "parentId": "root",
      "path": "components/text-area",
      "hasAction": false,
      "hasLoader": false,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/components.text-area-lp0qP-mE.js",
      "imports": [
        "/assets/svg-only-BUl2-q3t.js",
        "/assets/chunk-GNGMS2XR-tvBkBdX-.js",
        "/assets/example-DtY9XEO5.js",
        "/assets/page-header-DdCP7IhS.js",
        "/assets/props-table-DeHsdDoA.js",
        "/assets/label-CHELpdMz.js",
        "/assets/fmt-code-B3xTb7Sp.js",
        "/assets/inline-code-DVVgtuM_.js",
        "/assets/anchor-CyTXZvEQ.js",
        "/assets/table-DIb4mLlJ.js",
        "/assets/tooltip-CxiMdr0U.js",
        "/assets/index-JQ13VXdT.js",
        "/assets/index-BBZS1I9Y.js",
        "/assets/index-Ca6J9wKj.js",
        "/assets/index-OLbSb_kN.js",
        "/assets/index-DH_NfyU-.js",
        "/assets/index-DqrSqRKY.js",
        "/assets/floating-ui.dom-DX5uHWjD.js",
        "/assets/index-CJfz8w9W.js",
        "/assets/index-B4MZeaCk.js",
        "/assets/index-CanTqDgA.js",
        "/assets/CaretDown-Cdcc4ITP.js",
        "/assets/Check-C61ws_bl.js"
      ],
      "css": []
    },
    "routes/_index": {
      "id": "routes/_index",
      "parentId": "root",
      "index": true,
      "hasAction": false,
      "hasLoader": false,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/_index-C_kSVRDM.js",
      "imports": [
        "/assets/svg-only-BUl2-q3t.js",
        "/assets/chunk-GNGMS2XR-tvBkBdX-.js",
        "/assets/link-BAgi7UJv.js",
        "/assets/page-header-DdCP7IhS.js",
        "/assets/anchor-CyTXZvEQ.js",
        "/assets/inline-code-DVVgtuM_.js",
        "/assets/table-DIb4mLlJ.js",
        "/assets/fmt-code-B3xTb7Sp.js",
        "/assets/CaretDown-Cdcc4ITP.js",
        "/assets/Check-C61ws_bl.js"
      ],
      "css": []
    }
  },
  "url": "/assets/manifest-859edddc.js",
  "version": "859edddc"
};
  window.__reactRouterRouteModules = {"root":route0,"routes/components.text-area":route1};

import("/assets/entry.client-BSBYkDDb.js");</script></body></html><!--$--><script nonce="74010861-d22c-49a6-a4c9-3f998fec273b">window.__reactRouterContext.streamController.enqueue("[{\"_1\":2,\"_12\":-5,\"_13\":-5},\"loaderData\",{\"_3\":4,\"_11\":-5},\"root\",{\"_5\":6,\"_7\":8,\"_9\":10},\"currentVersion\",\"0.22.1\",\"commitSha\",\"9d66d9dbe0991881849a40ebceee8a915e32e1f0\",\"deploymentId\",\"dpl_BNnYmCWQKnDB9Y4dkmW3S4Xj1s44\",\"routes/components.text-area\",\"actionData\",\"errors\"]\n");</script><!--$--><script nonce="74010861-d22c-49a6-a4c9-3f998fec273b">window.__reactRouterContext.streamController.close();</script><!--/$--><!--/$-->