\n    </>\n  );\n};","file","textarea.stories.tsx",{"_10":220,"_215":221,"_217":218},"WithRowsEn","const WithRowsEn = () => {\n  return (\n    <>\n      <Label htmlFor='my-textarea-rows'>Description</Label>\n      <Textarea id='my-textarea-rows' rows={6} />\n    </>\n  );\n};",{"_10":223,"_215":224,"_217":218},"WithRows","const WithRows = () => {\n  return (\n    <>\n      <Label htmlFor='my-textarea-rows'>Beskrivelse</Label>\n      <Textarea id='my-textarea-rows' rows={6} />\n    </>\n  );\n};",{"_10":226,"_215":227,"_217":218},"Disabled","const Disabled = () => {\n  return (\n    <>\n      <Label htmlFor='my-textarea-disabled'>Label</Label>\n      <Textarea id='my-textarea-disabled' disabled value='Disabled textarea' />\n    </>\n  );\n};",{"_10":229,"_215":230,"_217":218},"ReadOnly","const ReadOnly = () => {\n  return (\n    <Field>\n      <Label htmlFor='my-textarea-readonly'>Beskrivelse av saken</Label>\n      <FieldDescription>\n        Teksten er lagt inn automatisk basert på det du allerede har sendt inn,\n        og kan ikke redigeres.\n      </FieldDescription>\n      <Textarea\n        id='my-textarea-readonly'\n        readOnly\n        value='Jeg søker om støtte fordi jeg trenger midler til å gjennomføre prosjektet slik det er planlagt.'\n      />\n    </Field>\n  );\n};",{"_10":232,"_215":233,"_217":218},"ReadOnlyEn","const ReadOnlyEn = () => {\n  return (\n    <Field>\n      <Label htmlFor='my-textarea-readonly-en'>Case description</Label>\n      <FieldDescription>\n        This text has been added automatically based on information you have\n        already submitted, and cannot be edited.\n      </FieldDescription>\n      <Textarea\n        id='my-textarea-readonly-en'\n        readOnly\n        value='I am applying for support because I need funding to carry out the project as planned.'\n      />\n    </Field>\n  );\n};","dodont",[],"mdxCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return t};var _=(t,e,o)=>(o=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(s({},\"__esModule\",{value:!0}),t);var d=g((v,a)=>{a.exports=_jsx_runtime});var k={};y(k,{default:()=>m,frontmatter:()=>j});var n=_(d()),j=void 0;function u(t){let e={a:\"a\",p:\"p\",...t.components},{Alert:o}=e;return o||w(\"Alert\",!0),(0,n.jsx)(o,{\"data-color\":\"info\",children:(0,n.jsxs)(e.p,{children:[\"We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on \",(0,n.jsx)(e.a,{href:\"https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml\",children:\"Github\"}),\" or \",(0,n.jsx)(e.a,{href:\"https://designsystemet.no/slack\",children:\"Slack\"}),\".\"]})})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function w(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(k);})();\n;return Component;","metadata",{"_50":159,"_240":241,"_242":243},"subtitle","var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},d=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of l(t))!h.call(e,s)&&s!==n&&r(e,s,{get:()=>t[s],enumerable:!(c=p(t,s))||c.enumerable});return e};var M=(e,t,n)=>(n=e!=null?m(f(e)):{},d(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),w=e=>d(r({},\"__esModule\",{value:!0}),e);var i=_((y,a)=>{a.exports=_jsx_runtime});var D={};j(D,{default:()=>x,frontmatter:()=>C});var o=M(i()),C=void 0;function u(e){let t={code:\"code\",p:\"p\",...e.components};return(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:\"Textarea\"}),\" is used when the user needs to enter text that spans multiple lines.\"]})}function x(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}return w(D);})();\n;return Component;","image","Textarea.svg","linkMetadata",[246,248,252,256,258,260,263,265,267,270],{"_50":247},"Textarea - Designsystemet",{"_10":249,"_250":251},"description","content","`Textarea` is used when the user needs to enter text that spans multiple lines. ",{"_253":254,"_250":255},"property","og:image","/img/designsystemet-meta.png",{"_253":257,"_250":159},"og:title",{"_253":259,"_250":251},"og:description",{"_253":261,"_250":262},"og:url","https://designsystemet.no",{"_253":264,"_250":159},"twitter:title",{"_253":266,"_250":251},"twitter:description",{"_253":268,"_250":269},"twitter:card","summary_large_image",{"_253":271,"_250":255},"twitter:image","cssSource",":where(.ds-input){margin:0}.ds-input{--dsc-input-padding:var(--ds-size-2) var(--ds-size-3);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-outline-color--hover:var(--ds-color-neutral-border-default);--dsc-input-outline-color--toggle--hover:var(--dsc-input-accent-color);--dsc-input-outline-width--hover:var(--ds-border-width-default);--dsc-input-outline-style--hover:solid;--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:inherit;max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:-moz-read-only:not(select:not([readonly]))):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly]):hover,:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:read-only:not(select:not([readonly]))):hover{outline-color:var(--dsc-input-outline-color--hover);outline-style:var(--dsc-input-outline-style--hover);outline-width:var(--dsc-input-outline-width--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:-moz-read-only:not(select:not([readonly]))):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:read-only:not(select:not([readonly]))):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly]):hover):is(:checked,:indeterminate:where([type=checkbox])):not([aria-invalid=true]){outline-color:var(--dsc-input-outline-color--toggle--hover)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:-moz-read-only:not(select:not([readonly]))):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}:is(:has(label):not(:has(label:hover)) .ds-input:not(:focus-visible,:disabled,:read-only:not(select:not([readonly]))):hover,.ds-input:is([type=radio],[type=checkbox]):not(:focus-visible,:disabled,[readonly]):hover):is([aria-invalid=true]){outline-color:var(--dsc-input-accent-color--invalid)}@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;-webkit-padding-end:2.4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[readonly]{background:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}","cssVars",{"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":289,"_297":298,"_299":295,"_300":291,"_301":302,"_303":302,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"--dsc-input-padding","var(--ds-size-2) var(--ds-size-3)","--dsc-input-size--toggle","var(--ds-size-6)","--dsc-input-size","var(--ds-size-12)","--dsc-input-background--readonly","var(--ds-color-neutral-surface-tinted)","--dsc-input-background","var(--ds-color-neutral-surface-default)","--dsc-input-border-color--readonly","var(--ds-color-neutral-border-subtle)","--dsc-input-border-color","var(--ds-color-neutral-border-default)","--dsc-input-border-style","solid","--dsc-input-border-width--toggle","max(var(--ds-border-width-default),calc(var(--ds-size-1)/2))","--dsc-input-border-width","var(--ds-border-width-default)","--dsc-input-outline-color--hover","--dsc-input-outline-color--toggle--hover","var(--dsc-input-accent-color)","--dsc-input-outline-width--hover","--dsc-input-outline-style--hover","--dsc-input-color--readonly","var(--ds-color-neutral-text-default)","--dsc-input-color","--dsc-input-stroke-color","var(--ds-color-base-contrast-default)","--dsc-input-stroke-color--invalid","var(--ds-color-danger-base-contrast-default)","--dsc-input-stroke-width","0.05em","--dsc-input-accent-color","var(--ds-color-base-default)","--dsc-input-accent-color--invalid","var(--ds-color-danger-text-subtle)","cssAttrs",{"_316":317},"width","auto","toc",[],"componentDocs",[322],{"_323":324,"_327":328,"_249":329,"_330":159,"_331":332,"_333":334},"tags",{"_325":326},"example","<Textarea />","filePath","/usr/src/app/packages/react/src/components/textarea/textarea.tsx","Native HTML textarea element.","displayName","methods",[],"props",{},"navigation",{"_337":338,"_339":340,"_341":342},"overviewLink","/en/components/docs/textarea/overview","codeLink","/en/components/docs/textarea/code","accessibilityLink","/en/components/docs/textarea/accessibility","githubLink","https://github.com/digdir/designsystemet/tree/main/apps/www/app/content/components/textarea/en/accessibility.mdx","actionData","errors"]
</article></body></html>