@uswds/uswds/packages/usa-input-mask/src/test/input-mask-phone.template.html

Open source UI components and visual style guide for U.S. government websites

<div class="usa-input-masking">
  <h3 class="site-preview-heading">US Telephone Number Input Mask</h3>
  <label class="usa-label" for="tel">US Telephone Number</label>
  <div class="usa-hint" id="telHint">For example, (123) 456-7890</div>
  <span class="usa-input-mask" data-mask="___-___-____">
    <span class="usa-input-mask--content test" aria-hidden="true" id="telMask"
      >___-___-____</span
    >
    <input
      id="tel"
      type="tel"
      name="tel"
      pattern="\\d{3}-\d{3}-\d{4}"
      class="usa-input usa-masked"
      aria-describedby="telHint"
      maxlength="14"
      data-placeholder="___-___-____"
    />
  </span>
</div>