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

Hydrogen's full design system and component library.

<div data-h2-form-item="telephone">
  <div data-h2-input-title-wrapper>
    <div data-h2-input-label-wrapper>
      <label
        data-h2-input-label 
        for="telephoneInput">Telephone Input 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>
    <input 
      data-h2-input
      id="telephoneInput" 
      placeholder="e.g. 555-555-5555" 
      required 
      type="tel"/>
  </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>