Text area

<div class="spectrum-Textfield spectrum-Textfield--sizeS spectrum-Textfield--multiline">
  <label for="textfield-s" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Tell us your story</label>
  <span id="character-count-1" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-s" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-1 character-count-1"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeS spectrum-HelpText--neutral">
    <div id="helptext-1" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeM spectrum-Textfield--multiline">
  <label for="textfield-m" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Tell us your story</label>
  <span id="character-count-2" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-m" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-2 character-count-2"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-2" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeL spectrum-Textfield--multiline">
  <label for="textfield-l" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Tell us your story</label>
  <span id="character-count-3" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-l" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-3 character-count-3"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeL spectrum-HelpText--neutral">
    <div id="helptext-3" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--sizeXL spectrum-Textfield--multiline">
  <label for="textfield-xl" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Tell us your story</label>
  <span id="character-count-4" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-xl" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-4 character-count-4"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeXL spectrum-HelpText--neutral">
    <div id="helptext-4" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <label for="textfield-helptext" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Tags</label>
  <textarea id="textfield-helptext" name="field" class="spectrum-Textfield-input" aria-describedby="helptext-5"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-5" class="spectrum-HelpText-text">Tags must be comma separated.</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline">
  <label for="textfield-character-count" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <span id="character-count-5" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-character-count" name="field" class="spectrum-Textfield-input" aria-describedby="character-count-5"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--sideLabel">
  <label for="textfield-m-sidelabel" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <span id="character-count-6" class="spectrum-Textfield-characterCount">50</span>
  <textarea id="textfield-m-sidelabel" name="field" class="spectrum-Textfield-input" pattern=".{8,}" aria-describedby="helptext-6 character-count-6"></textarea>
  <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
    <div id="helptext-6" class="spectrum-HelpText-text">50/50 characters remaining</div>
  </div>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-disabled">
  <label for="textarea-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-disabled" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+" disabled></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-valid">
  <label for="textarea-valid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea id="textarea-valid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>A valid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-valid is-disabled">
  <label for="textarea-valid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea id="textarea-valid-disabled" name="field"  class="spectrum-Textfield-input" required disabled>A valid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid">
  <label for="textarea-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea--invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-disabled">
  <label for="textarea-invalid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-invalid-disabled" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" disabled>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-focused">
  <label for="textarea-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-focused" name="field" class="spectrum-Textfield-input"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-keyboardFocused">
  <label for="textarea-keyboard-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-keyboard-focused" name="field" class="spectrum-Textfield-input"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-focused">
  <label for="textarea-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline is-invalid is-keyboardFocused">
  <label for="textarea-keyboard-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-keyboard-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet">
  <label for="textarea-quiet" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-disabled">
  <label for="textarea-quiet-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-disabled" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+" disabled></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-valid">
  <label for="textarea-quiet-valid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea id="textarea-quiet-valid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>A valid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-valid is-disabled">
  <label for="textarea-valid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </svg>
  <textarea id="textarea-valid-disabled" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required disabled>A valid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid">
  <label for="textarea-quiet-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-disabled">
  <label for="textarea-quiet-invalid-disabled" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-invalid-disabled" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" disabled>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-focused">
  <label for="textarea-quiet-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-focused" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-keyboardFocused">
  <label for="textarea-quiet-keyboard-focused" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <textarea id="textarea-quiet-keyboard-focused" name="field" class="spectrum-Textfield-input" pattern="[\w\s]+"></textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-focused">
  <label for="textarea-quiet-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>

<div class="spectrum-Textfield spectrum-Textfield--multiline spectrum-Textfield--quiet is-invalid is-keyboardFocused">
  <label for="textarea-quiet-keyboard-focused-invalid" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Comments</label>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <textarea id="textarea-quiet-keyboard-focused-invalid" name="field"  class="spectrum-Textfield-input" pattern="[\w\s]+" required>Invalid input</textarea>
</div>