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>((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/entry.client-BA0gwwvm.js"/><link rel="modulepreload" href="/assets/jsx-runtime-SXuW0CJ-.js"/><link rel="modulepreload" href="/assets/index-BtDJEeXv.js"/><link rel="modulepreload" href="/assets/components-LVJ8Lc9g.js"/><link rel="modulepreload" href="/assets/cx-CZJaCf4j.js"/><link rel="modulepreload" href="/assets/Sun-DPbjOjaf.js"/><link rel="modulepreload" href="/assets/X-DQ9iXXgp.js"/><link rel="modulepreload" href="/assets/theme-provider-CWAOB80z.js"/><link rel="modulepreload" href="/assets/icon-button-DlyyQg8-.js"/><link rel="modulepreload" href="/assets/select-BJQULMww.js"/><link rel="modulepreload" href="/assets/icon-CQYvmoeF.js"/><link rel="modulepreload" href="/assets/tooltip-mzrPgvps.js"/><link rel="modulepreload" href="/assets/toast-BuNGgGLJ.js"/><link rel="modulepreload" href="/assets/CircleNotch-BlXtrAK7.js"/><link rel="modulepreload" href="/assets/index-CR0xAWKU.js"/><link rel="modulepreload" href="/assets/booleanish-ff-PPuh4.js"/><link rel="modulepreload" href="/assets/CaretDown-COhneMz8.js"/><link rel="modulepreload" href="/assets/Check-BWDNRyUy.js"/><link rel="modulepreload" href="/assets/index-DRpHo9bj.js"/><link rel="modulepreload" href="/assets/index-DQw4YVnS.js"/><link rel="modulepreload" href="/assets/index-BckHqM5i.js"/><link rel="modulepreload" href="/assets/index-COqlXNh9.js"/><link rel="modulepreload" href="/assets/Combination-omsP98B4.js"/><link rel="modulepreload" href="/assets/index-D2zdw94q.js"/><link rel="modulepreload" href="/assets/index-DEQiVb3Y.js"/><link rel="modulepreload" href="/assets/index-BQU6ZhNs.js"/><link rel="modulepreload" href="/assets/index-DPJf0aIF.js"/><link rel="modulepreload" href="/assets/index-y6uS-t8t.js"/><link rel="modulepreload" href="/assets/compose-refs-CVPfgua0.js"/><link rel="modulepreload" href="/assets/separator-Cjt8SESA.js"/><link rel="modulepreload" href="/assets/svg-only-WE5WOZDP.js"/><link rel="modulepreload" href="/assets/index-C6H7A8Ms.js"/><link rel="modulepreload" href="/assets/WarningDiamond-Q0YQyplI.js"/><link rel="modulepreload" href="/assets/Info-B8zmaU_T.js"/><link rel="modulepreload" href="/assets/root-BUlQOejA.js"/><link rel="modulepreload" href="/assets/example-8HadgIO3.js"/><link rel="modulepreload" href="/assets/page-header-BFD76_Ed.js"/><link rel="modulepreload" href="/assets/props-table-nRLMBVlL.js"/><link rel="modulepreload" href="/assets/label-DvT6sVkj.js"/><link rel="modulepreload" href="/assets/fmt-code-Bha8sy64.js"/><link rel="modulepreload" href="/assets/inline-code-1GWiDWXl.js"/><link rel="modulepreload" href="/assets/anchor-BoH21_To.js"/><link rel="modulepreload" href="/assets/table-CE2lRu23.js"/><link rel="modulepreload" href="/assets/components.text-area-Bw6qazvq.js"/><script>window.__remixContext = {"basename":"/","future":{"v3_fetcherPersist":true,"v3_relativeSplatPath":true,"v3_throwAbortReason":true,"v3_routeConfig":false,"v3_singleFetch":true,"v3_lazyRouteDiscovery":true,"unstable_optimizeDeps":true},"isSpaMode":false};window.__remixContext.stream = new ReadableStream({start(controller){window.__remixContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script><script type="module" async="">;
import * as route0 from "/assets/root-BUlQOejA.js";
import * as route1 from "/assets/components.text-area-Bw6qazvq.js";
window.__remixManifest = {
  "entry": {
    "module": "/assets/entry.client-BA0gwwvm.js",
    "imports": [
      "/assets/jsx-runtime-SXuW0CJ-.js",
      "/assets/index-BtDJEeXv.js",
      "/assets/components-LVJ8Lc9g.js"
    ],
    "css": []
  },
  "routes": {
    "root": {
      "id": "root",
      "path": "",
      "hasAction": false,
      "hasLoader": true,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/root-BUlQOejA.js",
      "imports": [
        "/assets/jsx-runtime-SXuW0CJ-.js",
        "/assets/index-BtDJEeXv.js",
        "/assets/components-LVJ8Lc9g.js",
        "/assets/cx-CZJaCf4j.js",
        "/assets/Sun-DPbjOjaf.js",
        "/assets/X-DQ9iXXgp.js",
        "/assets/theme-provider-CWAOB80z.js",
        "/assets/icon-button-DlyyQg8-.js",
        "/assets/select-BJQULMww.js",
        "/assets/icon-CQYvmoeF.js",
        "/assets/tooltip-mzrPgvps.js",
        "/assets/toast-BuNGgGLJ.js",
        "/assets/CircleNotch-BlXtrAK7.js",
        "/assets/index-CR0xAWKU.js",
        "/assets/booleanish-ff-PPuh4.js",
        "/assets/CaretDown-COhneMz8.js",
        "/assets/Check-BWDNRyUy.js",
        "/assets/index-DRpHo9bj.js",
        "/assets/index-DQw4YVnS.js",
        "/assets/index-BckHqM5i.js",
        "/assets/index-COqlXNh9.js",
        "/assets/Combination-omsP98B4.js",
        "/assets/index-D2zdw94q.js",
        "/assets/index-DEQiVb3Y.js",
        "/assets/index-BQU6ZhNs.js",
        "/assets/index-DPJf0aIF.js",
        "/assets/index-y6uS-t8t.js",
        "/assets/compose-refs-CVPfgua0.js",
        "/assets/separator-Cjt8SESA.js",
        "/assets/svg-only-WE5WOZDP.js",
        "/assets/index-C6H7A8Ms.js",
        "/assets/WarningDiamond-Q0YQyplI.js",
        "/assets/Info-B8zmaU_T.js"
      ],
      "css": [
        "/assets/root-J8EvZzul.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-Bw6qazvq.js",
      "imports": [
        "/assets/jsx-runtime-SXuW0CJ-.js",
        "/assets/example-8HadgIO3.js",
        "/assets/page-header-BFD76_Ed.js",
        "/assets/props-table-nRLMBVlL.js",
        "/assets/label-DvT6sVkj.js",
        "/assets/cx-CZJaCf4j.js",
        "/assets/fmt-code-Bha8sy64.js",
        "/assets/inline-code-1GWiDWXl.js",
        "/assets/anchor-BoH21_To.js",
        "/assets/svg-only-WE5WOZDP.js",
        "/assets/table-CE2lRu23.js",
        "/assets/tooltip-mzrPgvps.js",
        "/assets/index-DRpHo9bj.js",
        "/assets/index-BckHqM5i.js",
        "/assets/index-COqlXNh9.js",
        "/assets/index-BtDJEeXv.js",
        "/assets/index-D2zdw94q.js",
        "/assets/index-DEQiVb3Y.js",
        "/assets/index-BQU6ZhNs.js",
        "/assets/index-C6H7A8Ms.js",
        "/assets/index-y6uS-t8t.js",
        "/assets/CaretDown-COhneMz8.js",
        "/assets/Check-BWDNRyUy.js"
      ],
      "css": []
    },
    "routes/_index": {
      "id": "routes/_index",
      "parentId": "root",
      "index": true,
      "hasAction": false,
      "hasLoader": false,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/_index-CxpWe8FQ.js",
      "imports": [
        "/assets/jsx-runtime-SXuW0CJ-.js",
        "/assets/link-DzfJyvXZ.js",
        "/assets/anchor-BoH21_To.js",
        "/assets/inline-code-1GWiDWXl.js",
        "/assets/table-CE2lRu23.js",
        "/assets/fmt-code-Bha8sy64.js",
        "/assets/components-LVJ8Lc9g.js",
        "/assets/index-BtDJEeXv.js",
        "/assets/cx-CZJaCf4j.js",
        "/assets/CaretDown-COhneMz8.js",
        "/assets/Check-BWDNRyUy.js"
      ],
      "css": []
    }
  },
  "url": "/assets/manifest-afddf060.js",
  "version": "afddf060"
};
window.__remixRouteModules = {"root":route0,"routes/components.text-area":route1};

import("/assets/entry.client-BA0gwwvm.js");</script></body></html><!--$--><script>window.__remixContext.streamController.enqueue("[{\"_1\":2,\"_12\":-5,\"_13\":-5},\"loaderData\",{\"_3\":4,\"_11\":-5},\"root\",{\"_5\":6,\"_7\":8,\"_9\":10},\"currentVersion\",\"0.17.1\",\"commitSha\",\"7c7e30afa58a527ff26bac351f59b98774869d70\",\"deploymentId\",\"dpl_BRDw11bDe5mCr5wAPfZ8Cxqc4jH2\",\"routes/components.text-area\",\"actionData\",\"errors\"]\n");</script><!--$--><script>window.__remixContext.streamController.close();</script><!--/$--><!--/$-->