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/entry.client-9jtyp16j.js"/><link rel="modulepreload" href="/assets/jsx-runtime-BGCw9yFu.js"/><link rel="modulepreload" href="/assets/index-BjLclD8r.js"/><link rel="modulepreload" href="/assets/components-4eBsKzg_.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-jM7Hu9J5.js"/><link rel="modulepreload" href="/assets/theme-provider-t73DuUX5.js"/><link rel="modulepreload" href="/assets/button-Dr_wi4cs.js"/><link rel="modulepreload" href="/assets/select-hqKkJTLW.js"/><link rel="modulepreload" href="/assets/tooltip-B9NIMqks.js"/><link rel="modulepreload" href="/assets/CircleNotch-B2RH-8Wx.js"/><link rel="modulepreload" href="/assets/index-B9MqriIn.js"/><link rel="modulepreload" href="/assets/index-Bb4qSo10.js"/><link rel="modulepreload" href="/assets/icon-Bjozs76z.js"/><link rel="modulepreload" href="/assets/svg-only-D3tgKQrK.js"/><link rel="modulepreload" href="/assets/booleanish-ff-PPuh4.js"/><link rel="modulepreload" href="/assets/CaretDown-CcjdEjUB.js"/><link rel="modulepreload" href="/assets/index-BsEq5Qc-.js"/><link rel="modulepreload" href="/assets/index-BUkULpd_.js"/><link rel="modulepreload" href="/assets/index-BRGDuqCm.js"/><link rel="modulepreload" href="/assets/index-DydFgri2.js"/><link rel="modulepreload" href="/assets/index-DdYLllnc.js"/><link rel="modulepreload" href="/assets/Combination-DXYMLeuE.js"/><link rel="modulepreload" href="/assets/index-Fgy7E8ED.js"/><link rel="modulepreload" href="/assets/index-BE3kE9PW.js"/><link rel="modulepreload" href="/assets/index-DK72Q-7G.js"/><link rel="modulepreload" href="/assets/index-DZAQ7xhd.js"/><link rel="modulepreload" href="/assets/index-CjO41k4g.js"/><link rel="modulepreload" href="/assets/compose-refs-B6sdyujG.js"/><link rel="modulepreload" href="/assets/separator-CFRWGhHf.js"/><link rel="modulepreload" href="/assets/index-TWB5b2DM.js"/><link rel="modulepreload" href="/assets/root-Dg6pw-8K.js"/><link rel="modulepreload" href="/assets/example-Cw_u3ylL.js"/><link rel="modulepreload" href="/assets/props-table-Bigv3Y0P.js"/><link rel="modulepreload" href="/assets/label-DXckLX0C.js"/><link rel="modulepreload" href="/assets/fmt-code-qFC-uC5j.js"/><link rel="modulepreload" href="/assets/inline-code-COlL0ueq.js"/><link rel="modulepreload" href="/assets/anchor-ZqzJCeeo.js"/><link rel="modulepreload" href="/assets/table-DYp-lyL5.js"/><link rel="modulepreload" href="/assets/components.text-area-B4HnLOuz.js"/><script>window.__remixContext = {"basename":"/","future":{"v3_fetcherPersist":true,"v3_relativeSplatPath":true,"v3_throwAbortReason":true,"v3_singleFetch":true,"v3_lazyRouteDiscovery":true,"unstable_optimizeDeps":true,"unstable_routeConfig":false},"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-Dg6pw-8K.js";
import * as route1 from "/assets/components.text-area-B4HnLOuz.js";
window.__remixManifest = {
  "entry": {
    "module": "/assets/entry.client-9jtyp16j.js",
    "imports": [
      "/assets/jsx-runtime-BGCw9yFu.js",
      "/assets/index-BjLclD8r.js",
      "/assets/components-4eBsKzg_.js"
    ],
    "css": []
  },
  "routes": {
    "root": {
      "id": "root",
      "path": "",
      "hasAction": false,
      "hasLoader": true,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/root-Dg6pw-8K.js",
      "imports": [
        "/assets/jsx-runtime-BGCw9yFu.js",
        "/assets/index-BjLclD8r.js",
        "/assets/components-4eBsKzg_.js",
        "/assets/Check-Dv5tP1VK.js",
        "/assets/Sun-CLMVxK8V.js",
        "/assets/X-CNiVD5EF.js",
        "/assets/cx-jM7Hu9J5.js",
        "/assets/theme-provider-t73DuUX5.js",
        "/assets/button-Dr_wi4cs.js",
        "/assets/select-hqKkJTLW.js",
        "/assets/tooltip-B9NIMqks.js",
        "/assets/CircleNotch-B2RH-8Wx.js",
        "/assets/index-B9MqriIn.js",
        "/assets/index-Bb4qSo10.js",
        "/assets/icon-Bjozs76z.js",
        "/assets/svg-only-D3tgKQrK.js",
        "/assets/booleanish-ff-PPuh4.js",
        "/assets/CaretDown-CcjdEjUB.js",
        "/assets/index-BsEq5Qc-.js",
        "/assets/index-BUkULpd_.js",
        "/assets/index-BRGDuqCm.js",
        "/assets/index-DydFgri2.js",
        "/assets/index-DdYLllnc.js",
        "/assets/Combination-DXYMLeuE.js",
        "/assets/index-Fgy7E8ED.js",
        "/assets/index-BE3kE9PW.js",
        "/assets/index-DK72Q-7G.js",
        "/assets/index-DZAQ7xhd.js",
        "/assets/index-CjO41k4g.js",
        "/assets/compose-refs-B6sdyujG.js",
        "/assets/separator-CFRWGhHf.js",
        "/assets/index-TWB5b2DM.js"
      ],
      "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-B4HnLOuz.js",
      "imports": [
        "/assets/jsx-runtime-BGCw9yFu.js",
        "/assets/example-Cw_u3ylL.js",
        "/assets/props-table-Bigv3Y0P.js",
        "/assets/label-DXckLX0C.js",
        "/assets/cx-jM7Hu9J5.js",
        "/assets/fmt-code-qFC-uC5j.js",
        "/assets/inline-code-COlL0ueq.js",
        "/assets/anchor-ZqzJCeeo.js",
        "/assets/Check-Dv5tP1VK.js",
        "/assets/table-DYp-lyL5.js",
        "/assets/tooltip-B9NIMqks.js",
        "/assets/index-BsEq5Qc-.js",
        "/assets/index-B9MqriIn.js",
        "/assets/index-DydFgri2.js",
        "/assets/index-DdYLllnc.js",
        "/assets/index-BjLclD8r.js",
        "/assets/index-Fgy7E8ED.js",
        "/assets/index-BE3kE9PW.js",
        "/assets/index-BRGDuqCm.js",
        "/assets/index-DK72Q-7G.js",
        "/assets/index-TWB5b2DM.js",
        "/assets/index-CjO41k4g.js",
        "/assets/CaretDown-CcjdEjUB.js"
      ],
      "css": []
    },
    "routes/_index": {
      "id": "routes/_index",
      "parentId": "root",
      "index": true,
      "hasAction": false,
      "hasLoader": false,
      "hasClientAction": false,
      "hasClientLoader": false,
      "hasErrorBoundary": false,
      "module": "/assets/_index-C5qn3SGv.js",
      "imports": [
        "/assets/jsx-runtime-BGCw9yFu.js",
        "/assets/link-BXMMzREt.js",
        "/assets/anchor-ZqzJCeeo.js",
        "/assets/inline-code-COlL0ueq.js",
        "/assets/table-DYp-lyL5.js",
        "/assets/fmt-code-qFC-uC5j.js",
        "/assets/components-4eBsKzg_.js",
        "/assets/index-BjLclD8r.js",
        "/assets/index-B9MqriIn.js",
        "/assets/cx-jM7Hu9J5.js",
        "/assets/CaretDown-CcjdEjUB.js",
        "/assets/Check-Dv5tP1VK.js"
      ],
      "css": []
    }
  },
  "url": "/assets/manifest-97405bd6.js",
  "version": "97405bd6"
};
window.__remixRouteModules = {"root":route0,"routes/components.text-area":route1};

import("/assets/entry.client-9jtyp16j.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.14.1\",\"commitSha\",\"7ac6176576af07066f109ed958cbdf14b7242662\",\"deploymentId\",\"dpl_J4GSBEBiUk8XVexX1SWpNGgpw3JQ\",\"routes/components.text-area\",\"actionData\",\"errors\"]\n");</script><!--$--><script>window.__remixContext.streamController.close();</script><!--/$--><!--/$-->