s-mask

s-mask formats an input while you type it. Give it a pattern and Summit inserts the fixed characters and rejects anything that does not fit, so phone numbers, card numbers, and dates come out clean.

<div s-data>
  <label class="s-field">
    <span class="s-label">Phone</span>
    <input class="s-input" s-mask="'(999) 999-9999'" placeholder="(555) 123-4567">
  </label>
</div>

#Pattern tokens

The expression is a string of tokens:

• 9 accepts a digit
• a accepts a letter
• * accepts a letter or a digit

Every other character is a literal that the mask inserts for you as you reach it.

<input s-mask="'9999-9999-9999-9999'">   <!-- card number -->
<input s-mask="'99/99'">                 <!-- expiry MM/YY -->
<input s-mask="'aaa-999'">               <!-- license plate -->

The pattern is an ordinary expression, so it can come from your state and change at runtime:

<input s-mask="pattern">