brandv1.0
Utilities
Data Display
Data Entry

Form Layout

some structure—from inline to horizontal to custom grid implementations—with our form layout options.

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.

(999) 999-9999
dd/mm/yyyy
e.g "999-99-9999"
+40 999 999 999
e.g a*-999-a999
$ 999,999,999.99
dd-mm-yyyy
~9.99 ~9.99 999
e.g "99%"
e.g "999.999.999.9999"
							
                                
<template>
    <form action="#">
        <div class="form-group">
        <label class="form-label">Phone</label>
        <MaskInput
            placeholder="(___) ___-____"
            mask="(###) ####-####"
            class="form-control"
        />
        <span class="form-text text-muted">(999) 999-9999</span>
        </div>
        <div class="form-group">
        <label class="form-label">Date</label>
        <MaskInput
            placeholder="__/__/____"
            mask="##/##/####"
            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>
        <MaskInput
            placeholder="___-__-____"
            mask="###-##-####"
            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>
        <MaskInput
            placeholder="+__ ___ ___ ___"
            mask="+## ### ### ###"
            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>
        <MaskInput
            placeholder="__-___-____"
            mask="a*-###-a###"
            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>
        <MaskInput
            placeholder="$ ___,___,___.__"
            mask="$ ###,###,###.##"
            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>
        <MaskInput
            placeholder="__-__-____"
            mask="##-##-####"
            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>
        <MaskInput
            placeholder="~_.__ ~_.__ ___"
            mask="~#.## ~#.## ###"
            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>
        <MaskInput placeholder="__%" mask="##%" 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>
        <MaskInput
            placeholder="___.___.___.____"
            mask="###.###.###.####"
            class="form-control"
        />
        <span class="form-text text-muted">e.g "999.999.999.9999"</span>
        </div>
    </form>
</template>
<script>
import MaskInput from "vue-3-mask";
export default {
  components: {
    MaskInput,
  },
};
</script>