Input masks

  1. Forms
  2. Form Elements
  3. Input masks

DD-MM-YYYY

Day, then month, then year.

Example format: 27-09-2026
<input class="form-control date-format"
       type="text" inputmode="numeric" placeholder="DD-MM-YYYY">

MM-DD-YYYY

Month, then day, then year.

Example format: 09-27-2026
<input class="form-control date-format-1"
       type="text" inputmode="numeric" placeholder="MM-DD-YYYY">

MM-YY

A compact format for expiry or reporting periods. 

<input class="form-control date-format-2"
       type="text" inputmode="numeric" placeholder="MM-YY">

Grouped amount

Applies lakh-style digit grouping as you type.

₹
Grouping is for readability; parse and validate before calculations. 
<div class="input-group">
  <span class="input-group-text">₹</span>
  <input class="form-control number-format" type="text"
         inputmode="decimal" placeholder="1,25,000">
</div>

Time formats

Compare hour-minute and hour-minute-second masks. 

<input class="form-control time-format-2" placeholder="HH:MM">
<input class="form-control time-format-1" placeholder="HH:MM:SS">

Segmented reference

Uppercase letters arranged in fixed-length groups.

Blocks: 4 · 3 · 3 · 4 characters. 
<input class="form-control formatting-blocks"
       type="text" placeholder="ABCD EFG HIJ KLMN">

Separators and prefix

Try a custom delimiter, mixed separators or a fixed prefix. 

<input class="form-control delimiter" placeholder="ABC·DEF·GHI">
<input class="form-control delimiters" placeholder="ABC/DEF/GHI-JK">
<input class="form-control prefix-element" placeholder="Prefix-0000">

Phone number

Format a phone value as the user types.

Choose a country-aware mask when collecting international phone numbers. 
<input class="form-control phone-number" type="tel"
       inputmode="tel" placeholder="+1 (415) 555-0148"
       autocomplete="tel">