Form mask

react-input-mask is a react js library for a different types of form input masking

Form mask

Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.

Preview

<form action="#">
    <div class="form-group">
        <label class="form-label">Phone</label>
        <input type="text" placeholder="" data-mask="(999) 999-9999" class="form-control">
        <span class="form-text text-muted">(999) 999-9999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Date</label>
        <input type="text" placeholder="" data-mask="99/99/9999" class="form-control">
        <span class="form-text text-muted">dd/mm/yyyy</span>
    </div>
    <div class="form-group">
        <label class="form-label">SSN field 1</label>
        <input type="text" placeholder="" data-mask="999-99-9999" class="form-control">
        <span class="form-text text-muted">e.g "999-99-9999"</span>
    </div>
    <div class="form-group">
        <label class="form-label">Phone field + ext.</label>
        <input type="text" placeholder="" data-mask="+40 999 999 999" class="form-control">
        <span class="form-text text-muted">+40 999 999 999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Product Key</label>
        <input type="text" placeholder="" data-mask="a*-999-a999" class="form-control">
        <span class="form-text text-muted">e.g a*-999-a999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Currency</label>
        <input type="text" placeholder="" data-mask="$ 999,999,999.99" class="form-control">
        <span class="form-text text-muted">$ 999,999,999.99</span>
    </div>
    <div class="form-group">
        <label class="form-label">Date 2</label>
        <input type="text" placeholder="" data-mask="99-99-9999" class="form-control">
        <span class="form-text text-muted">dd-mm-yyyy</span>
    </div>
    <div class="form-group">
        <label class="form-label">Eye Script</label>
        <input type="text" placeholder="" data-mask="~9.99 ~9.99 999" class="form-control">
        <span class="form-text text-muted">~9.99 ~9.99 999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Percent</label>
        <input type="text" placeholder="" data-mask="99%" class="form-control">
        <span class="form-text text-muted">e.g "99%"</span>
    </div>
    <div class="form-group mb-0">
        <label class="form-label">Pc Ip</label>
        <input type="text" placeholder="" data-mask="999.999.999.9999" class="form-control">
        <span class="form-text text-muted">e.g "999.999.999.9999"</span>
    </div>
</form>

import React from 'react';
import { Form } from 'react-bootstrap';
import InputMask from 'react-input-mask';
const FormMaskExample = () => {
  return (
    <Form>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupPhone">Phone</Form.Label>
            <Form.Control as={InputMask} id="formGroupPhone" mask="(999) 999-9999" />
            <Form.Text className="text-muted">(999) 999-9999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupDate">Date</Form.Label>
            <Form.Control as={InputMask} id="formGroupDate" mask="99/99/9999" />
            <Form.Text className="text-muted">dd/mm/yyyy</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupSSN">SSN field 1</Form.Label>
            <Form.Control as={InputMask} id="formGroupSSN" mask="999-99-9999" />
            <Form.Text className="text-muted">e.g “999-99-9999“</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupPhoneField">Phone field + ext.</Form.Label>
            <Form.Control as={InputMask} id="formGroupPhoneField" mask="+40 999 999 999" />
            <Form.Text className="text-muted">+40 999 999 999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupProductKey">Product Key</Form.Label>
            <Form.Control as={InputMask} id="formGroupProductKey" mask="a,[object Object],-999-a999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupCurrency">Currency</Form.Label>
            <Form.Control as={InputMask} id="formGroupCurrency" mask="$ 999,999,999.99" />
            <Form.Text className="text-muted">$ 999,999,999.99</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupDate,[object Object],2" mask="99-99-9999" />
            <Form.Text className="text-muted">dd-mm-yyyy</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupEyeScript">Eye Script</Form.Label>
            <Form.Control as={InputMask} id="formGroupEyeScript" mask="~9.99 ~9.99 999" />
            <Form.Text className="text-muted">~9.99 ~9.99 999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupPercent">Percent</Form.Label>
            <Form.Control as={InputMask} id="formGroupPercent" mask="99%" />
            <Form.Text className="text-muted">e.g “99%“</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label htmlFor="formGroupPcIp">Pc Ip</Form.Label>
            <Form.Control as={InputMask} id="formGroupPcIp" mask="999.999.999.9999" />
            <Form.Text className="text-muted">e.g 999.999.999.9999</Form.Text>
        </Form.Group>
    </Form>
  );
}
export default FormMaskExample;

<template>
   <BForm>
        <BFormGroup
          label="Phone"
          label-for="inputMask1"
          description="(999) 999-9999"
          class="mb-3"
        >
            <MaskInput id="inputMask1" mask="(###) ####-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Date"
          label-for="inputMask2"
          description="dd/mm/yyyy"
          class="mb-3"
        >
            <MaskInput id="inputMask2" mask="##/##/####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="SSN field 1"
          label-for="inputMask3"
          description="e.g '999-99-9999'"
          class="mb-3"
        >
            <MaskInput id="inputMask3" mask="###-##-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Phone field + ext."
          label-for="inputMask4"
          description="+40 999 999 999"
          class="mb-3"
        >
            <MaskInput id="inputMask4" mask="+## ### ### ###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Product Key"
          label-for="inputMask5"
          description="e.g a*-999-a999"
          class="mb-3"
        >
            <MaskInput id="inputMask5" mask="a*-###-a###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Currency"
          label-for="inputMask6"
          description="$ 999,999,999.99"
          class="mb-3"
        >
            <MaskInput id="inputMask6" mask="$ ###,###,###.##" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Date 2"
          label-for="inputMask7"
          description="dd-mm-yyyy"
          class="mb-3"
        >
            <MaskInput id="inputMask7" mask="##-##-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Eye Script"
          label-for="inputMask8"
          description="~9.99 ~9.99 999"
          class="mb-3"
        >
            <MaskInput id="inputMask8" mask="~#.## ~#.## ###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Percent"
          label-for="inputMask9"
          description="e.g '99%'"
          class="mb-3"
        >
            <MaskInput id="inputMask9" mask="##%" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Pc Ip"
          label-for="inputMask10"
          description="e.g '999.999.999.9999'"
        >
            <MaskInput id="inputMask10" mask="###.###.###.####" class="form-control"/>
        </BFormGroup>
    </BForm>
</template>
<script setup>
import MaskInput from "vue-3-mask";
</script>

<template>
   <BForm>
        <BFormGroup
          label="Phone"
          label-for="inputMask1"
          description="(999) 999-9999"
          class="mb-3"
        >
            <MaskInput id="inputMask1" mask="(###) ####-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Date"
          label-for="inputMask2"
          description="dd/mm/yyyy"
          class="mb-3"
        >
            <MaskInput id="inputMask2" mask="##/##/####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="SSN field 1"
          label-for="inputMask3"
          description="e.g '999-99-9999'"
          class="mb-3"
        >
            <MaskInput id="inputMask3" mask="###-##-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Phone field + ext."
          label-for="inputMask4"
          description="+40 999 999 999"
          class="mb-3"
        >
            <MaskInput id="inputMask4" mask="+## ### ### ###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Product Key"
          label-for="inputMask5"
          description="e.g a*-999-a999"
          class="mb-3"
        >
            <MaskInput id="inputMask5" mask="a*-###-a###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Currency"
          label-for="inputMask6"
          description="$ 999,999,999.99"
          class="mb-3"
        >
            <MaskInput id="inputMask6" mask="$ ###,###,###.##" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Date 2"
          label-for="inputMask7"
          description="dd-mm-yyyy"
          class="mb-3"
        >
            <MaskInput id="inputMask7" mask="##-##-####" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Eye Script"
          label-for="inputMask8"
          description="~9.99 ~9.99 999"
          class="mb-3"
        >
            <MaskInput id="inputMask8" mask="~#.## ~#.## ###" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Percent"
          label-for="inputMask9"
          description="e.g '99%'"
          class="mb-3"
        >
            <MaskInput id="inputMask9" mask="##%" class="form-control" />
        </BFormGroup>
        <BFormGroup
          label="Pc Ip"
          label-for="inputMask10"
          description="e.g '999.999.999.9999'"
        >
            <MaskInput id="inputMask10" mask="###.###.###.####" class="form-control"/>
        </BFormGroup>
    </BForm>
</template>
<script setup>
import MaskInput from "vue-3-mask";
</script>

<form action="#">
    <div class="form-group">
        <label class="form-label">Phone</label>
        <input type="text" placeholder="" data-mask="(999) 999-9999" class="form-control">
        <span class="form-text text-muted">(999) 999-9999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Date</label>
        <input type="text" placeholder="" data-mask="99/99/9999" class="form-control">
        <span class="form-text text-muted">dd/mm/yyyy</span>
    </div>
    <div class="form-group">
        <label class="form-label">SSN field 1</label>
        <input type="text" placeholder="" data-mask="999-99-9999" class="form-control">
        <span class="form-text text-muted">e.g "999-99-9999"</span>
    </div>
    <div class="form-group">
        <label class="form-label">Phone field + ext.</label>
        <input type="text" placeholder="" data-mask="+40 999 999 999" class="form-control">
        <span class="form-text text-muted">+40 999 999 999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Product Key</label>
        <input type="text" placeholder="" data-mask="a*-999-a999" class="form-control">
        <span class="form-text text-muted">e.g a*-999-a999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Currency</label>
        <input type="text" placeholder="" data-mask="$ 999,999,999.99" class="form-control">
        <span class="form-text text-muted">$ 999,999,999.99</span>
    </div>
    <div class="form-group">
        <label class="form-label">Date 2</label>
        <input type="text" placeholder="" data-mask="99-99-9999" class="form-control">
        <span class="form-text text-muted">dd-mm-yyyy</span>
    </div>
    <div class="form-group">
        <label class="form-label">Eye Script</label>
        <input type="text" placeholder="" data-mask="~9.99 ~9.99 999" class="form-control">
        <span class="form-text text-muted">~9.99 ~9.99 999</span>
    </div>
    <div class="form-group">
        <label class="form-label">Percent</label>
        <input type="text" placeholder="" data-mask="99%" class="form-control">
        <span class="form-text text-muted">e.g "99%"</span>
    </div>
    <div class="form-group mb-0">
        <label class="form-label">Pc Ip</label>
        <input type="text" placeholder="" data-mask="999.999.999.9999" class="form-control">
        <span class="form-text text-muted">e.g "999.999.999.9999"</span>
    </div>
</form>