Missouri State University Pattern Library

Text area

There are no notes for this item.

<div class="form-control Page1">
    <label for="field-1">Lorem ipsum dolor sit amet consectetur</label>
    <div class="description" id="description-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam eveniet laboriosam esse iste dolore mollitia pariatur sed, commodi asperiores provident.</div>
    <textarea id="field-1" class="textarea Page1" name="Field_sample_text_area" rows="5" cols="30" onkeyup="document.getElementById('sample_text_areaCharCount').innerHTML=(1000-this.value.length)" maxlength="1000" aria-describedby="description-1"></textarea>
    <div class="character-count"><span id="sample_text_areaCharCount">1000</span> characters remaining</div>

</div>
 
{{#> @control-wrapper}}
    {{#* inline 'container'}}
        {{> @label}}
        {{#if description}}
            {{> @description}}
        {{/if}}

        <textarea id="field-{{pageId}}" class="textarea Page{{pageId}}" name="Field_{{name}}" rows="{{rows}}" cols="{{cols}}" onkeyup="document.getElementById('{{name}}CharCount').innerHTML=({{maxLength}}-this.value.length)"{{#if maxLength}} maxlength="{{maxLength}}"{{/if}}{{#if required}} required aria-required="true"{{/if}}{{#if disabled}} disabled{{/if}}{{#if description}}aria-describedby="description-{{pageId}}"{{/if}}></textarea>
        <div class="character-count"><span id="{{name}}CharCount">{{maxLength}}</span> characters remaining</div>
    {{/inline}}
{{/@control-wrapper}}
 
{
  "pageId": 1,
  "label": "Lorem ipsum dolor sit amet consectetur",
  "name": "sample_text_area",
  "cols": 30,
  "rows": 5,
  "maxLength": 1000,
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam eveniet laboriosam esse iste dolore mollitia pariatur sed, commodi asperiores provident.",
  "required": null,
  "disabled": null
}