@hydrogen-design-system/system/dist/import/latest/components/forms/markup/html/textarea.html

Hydrogen's full design system and component library.

<div data-h2-form-item="textarea">
  <div data-h2-input-title-wrapper>
    <div data-h2-input-label-wrapper>
      <label
        data-h2-input-label 
        for="textareaInput">Textarea Label</label>
    </div>
    <div data-h2-input-data-wrapper>
      <span data-h2-input-required>(Required)</span><span data-h2-input-optional>(Optional)</span><span data-h2-input-data>Supplementary Info</span>
    </div>
  </div>
  <div data-h2-input-wrapper>
    <textarea 
      data-h2-input
      id="textareaInput" 
      placeholder="e.g. placeholder text" 
      required></textarea>
  </div>
  <div data-h2-input-context-wrapper>
    <div data-h2-input-error-wrapper>
      <span data-h2-input-error>Custom error text.</span>
    </div>
    <div data-h2-input-info-trigger-wrapper>
      <button
        aria-expanded="false"
        data-h2-input-info-trigger
        type="button">
        <span data-h2-input-info-trigger-more-label>More</span><span data-h2-input-info-trigger-less-label>Less</span> Info
        <span data-h2-input-info-trigger-label>Click to view...</span>
      </button>
    </div>
  </div>
  <div 
    aria-hidden="true"
    data-h2-input-info-wrapper>
    <p data-h2-focus>Explain why this field is collected.</p>
  </div>
</div>