Input masks

The separators go in as you type; paste still works

Phone and ZIP

US formats.

Phone

ZIP code

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="im-p">Phone</label>
<div class="input">
<input data-mask="phone" id="im-p" name="im-p" autocomplete="tel" type="tel" placeholder="(207) 555-0100" inputmode="tel">
</div>
</div>
<div class="field">
<label class="label" for="im-z">ZIP code</label>
<div class="input">
<input data-mask="zip" id="im-z" name="im-z" autocomplete="postal-code" type="text" placeholder="04101" inputmode="numeric">
</div>
</div>
</div>

Dates and cards

Month, day, year; a card in groups of four.

Date

Card number

Expiry

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="im-d">Date</label>
<div class="input">
<input data-mask="date" id="im-d" name="im-d" type="text" placeholder="MM/DD/YYYY" inputmode="numeric">
</div>
</div>
<div class="field">
<label class="label" for="im-c">Card number</label>
<div class="input">
<input data-mask="card" id="im-c" name="im-c" autocomplete="cc-number" type="text" placeholder="4242 4242 4242 4242" inputmode="numeric">
</div>
</div>
<div class="field">
<label class="label" for="im-e">Expiry</label>
<div class="input">
<input data-mask="expiry" id="im-e" name="im-e" autocomplete="cc-exp" type="text" placeholder="MM/YY" inputmode="numeric">
</div>
</div>
</div>

Money and codes

Money written out when you leave the field; a SKU in capitals.

Amount

SKU

Show the code

<div class="form-grid two w-100">
<div class="field">
<label class="label" for="im-m">Amount</label>
<div class="input">
<span class="affix">$</span>
<input data-mask="money" id="im-m" name="im-m" type="text" placeholder="0.00" inputmode="decimal">
</div>
</div>
<div class="field">
<label class="label" for="im-s">SKU</label>
<div class="input">
<input data-mask="sku" id="im-s" name="im-s" type="text" placeholder="BK-1001">
</div>
</div>
</div>