Masks

<div>
  <label class="form-label" for="mk-1">Phone</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="mk-1" name="mk-1" type="text" placeholder="46 701 234 567" inputmode="tel" data-mask="phone">
  </div>
</div>
<div>
  <label class="form-label" for="mk-2">Card number</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="mk-2" name="mk-2" type="text" placeholder="4242 4242 4242 4242" inputmode="numeric" data-mask="card">
  </div>
</div>

<div>
  <label class="form-label" for="mk-3">Date</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="mk-3" name="mk-3" type="text" placeholder="YYYY-MM-DD" inputmode="numeric" data-mask="date">
  </div>
</div>
<div>
  <label class="form-label" for="mk-4">Amount</label>
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="mk-4" name="mk-4" type="text" placeholder="1,250.00" inputmode="decimal" data-mask="money">
  </div>
</div>