{{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;textarea-example-1\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;textarea-example-1-textarea\&quot;&gt;Description&lt;/label&gt;<br />
  &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;textarea-example-1-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;4\&quot; maxlength=\&quot;3000\&quot; data-countdown&gt;&lt;/textarea&gt;<br />
  &lt;p id=\&quot;textarea-example-1-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a930c3a12d6&quot; }) }}


<p>When JavaScript is enabled, the message should be &#8220;You have XX characters remaining&#8221;. This will react to interactions / prepopulated content on page load. Default (JavaScript disabled) message &#8220;You can enter up to XX characters&#8221;.</p>



<h2 class="wp-block-heading">Textarea input with hint</h2>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;textarea-example-2\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;textarea-example-2-textarea\&quot;&gt;Description&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Hint&lt;/p&gt;<br />
  &lt;textarea class=\&quot;form__textarea\&quot; id=\&quot;textarea-example-2-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;4\&quot; maxlength=\&quot;3000\&quot; data-countdown&gt;&lt;/textarea&gt;<br />
  &lt;p id=\&quot;textarea-example-2-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a930c3a1352&quot; }) }}


<h2 class="wp-block-heading">Textarea with submission error</h2>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group form__group&#8211;error\&quot; id=\&quot;textarea-example-4\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;textarea-example-4-textarea\&quot;&gt;Description&lt;/label&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Description\&quot; is required&lt;/p&gt;<br />
  &lt;textarea class=\&quot;form__textarea form__textarea&#8211;error\&quot; id=\&quot;textarea-example-4-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;4\&quot; maxlength=\&quot;3000\&quot; data-countdown&gt;&lt;/textarea&gt;<br />
  &lt;p id=\&quot;textarea-example-4-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;65a930c3a1393&quot; }) }}


<h2 class="wp-block-heading">Textarea with hint and submission error</h2>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group form__group&#8211;error\&quot; id=\&quot;textarea-example-4\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;textarea-example-4-textarea\&quot;&gt;Description&lt;/label&gt;<br />
  &lt;p class=\&quot;form__hint\&quot;&gt;Hint&lt;/p&gt;<br />
  &lt;p class=\&quot;form__error-message\&quot;&gt;\&quot;Description\&quot; is required&lt;/p&gt;<br />
  &lt;textarea class=\&quot;form__textarea form__textarea&#8211;error\&quot; id=\&quot;textarea-example-4-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;4\&quot; maxlength=\&quot;3000\&quot; data-countdown&gt;&lt;/textarea&gt;<br />
  &lt;p id=\&quot;textarea-example-4-textarea-countdown\&quot;&gt;You can enter up to 3000 characters&lt;/p&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;667013ee88b53&quot; }) }}


<h2 class="wp-block-heading">Textarea read only</h2>



<p>WIP &#8211; Not just adding the readonly attribute but the className .form__textarea&#8211;readonly</p>


 {{ aspExample({ code: &quot;&lt;div class=\&quot;form__group\&quot; id=\&quot;textarea-example-readonly\&quot;&gt;<br />
  &lt;label class=\&quot;form__label\&quot; for=\&quot;textarea-example-readonly-textarea\&quot;&gt;Description&lt;/label&gt;<br />
  &lt;textarea class=\&quot;form__textarea form__textarea&#8211;readonly\&quot; id=\&quot;textarea-example-readonly-textarea\&quot; name=\&quot;text-area\&quot; rows=\&quot;4\&quot; readonly&gt;&lt;/textarea&gt;<br />
&lt;/div&gt;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;&quot;, id: &quot;67925534c8f8b&quot; }) }}


<p>WIP &#8211; Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.</p>



<h2 class="wp-block-heading">When to use this component</h2>



<p>When there is a large amount of textual content.</p>



<p>This component can be added within a conditional question.</p>



<p>WIP &#8211; Default amount of of rows: 4</p>



<h2 class="wp-block-heading">When not to use this component</h2>



<p> Use a text input if the field should be one single line.</p>



<h2 class="wp-block-heading">Status of development</h2>



<p>The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.</p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In Progress&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;default&quot;, id: &quot;68d173de65075&quot; }) }}

 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;hint&quot;, id: &quot;68d173de650d7&quot; }) }}

 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;&quot;, json: &quot;&quot;, title: &quot;&quot;, example: &quot;submission error&quot;, id: &quot;68d173de6511a&quot; }) }}