- Forms
- Input Mask
Static Mask Basic
CodeInput mask are use with input tags.
<!-- static mask basic -->
<form>
<fieldset class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="staticMask1" class="text-white-dark">x-mask="'##-#######'" (99-9999999)</label>
<input id="staticMask1" type="text" placeholder="__-_______" class="form-input" x-mask="99-9999999" />
</div>
<div>
<label for="staticMask2" class="text-white-dark">x-mask="'AA-####'" (aa-9999)</label>
<input id="staticMask2" type="text" placeholder="__-____" class="form-input" x-mask="aa-9999" />
</div>
</fieldset>
</form>
Alternate masks
Code
<!-- alternate masks -->
<form>
<fieldset class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="altMask1" class="text-white-dark">x-mask="'##.#'" (99.9)</label>
<input id="altMask1" type="text" placeholder="__._" class="form-input" x-mask="99.9" />
</div>
<div>
<label for="altMask2" class="text-white-dark">x-mask="'##.##'" (99.99)</label>
<input id="altMask2" type="text" placeholder="__.__" class="form-input" x-mask="99.99" />
</div>
</fieldset>
</form>
Dynamic Syntax
Code
<!-- dynamic syntax -->
<form>
<fieldset class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="dynamicMask1" class="text-white-dark">x-mask="'#-AAA###'" (9-a{1,3}9{1,3})</label>
<input id="dynamicMask1" type="text" placeholder="_-__" class="form-input" x-mask="9-aaa999" />
</div>
<div>
<label for="dynamicMask2" class="text-white-dark">x-mask="'AA-####'" (aa-9{1,4})</label>
<input id="dynamicMask2" type="text" placeholder="__-____" class="form-input" x-mask="aa-9999" />
</div>
<div>
<label for="dynamicMask3" class="text-white-dark">x-mask="'AA-##'" (aa-9{1,2})</label>
<input id="dynamicMask3" type="text" placeholder="__-__" class="form-input" x-mask="aa-99" />
</div>
</fieldset>
</form>
Date
Code
<!-- date -->
<form>
<fieldset class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="dateMask1" class="text-white-dark">x-mask="'##/##/####'" (dd/mm/yyyy)</label>
<input id="dateMask1" type="text" placeholder="__/__/____" class="form-input" x-mask="99/99/9999" />
</div>
<div>
<label for="dateMask2" class="text-white-dark">x-mask="'##-##-####'" (99-99-9999)</label>
<input id="dateMask2" type="text" placeholder="__-__-____" class="form-input" x-mask="99-99-9999" />
</div>
<div>
<label for="dateMask3" class="text-white-dark">x-mask="'## December, ####'" (99 December, 9999)</label>
<input id="dateMask3" type="text" placeholder="__ December, ____" class="form-input" x-mask="99 December, 9999" />
</div>
</fieldset>
</form>
IP
Code
<!-- ip -->
<form>
<fieldset>
<label for="ipMask" class="text-white-dark">x-mask="'###.###.###.###'" (192.198.1.1)</label>
<input id="ipMask" type="text" placeholder="___.___.___.___" class="form-input" x-mask="999.999.999.999" />
</fieldset>
</form>
Phone
Code
<!-- phone -->
<form>
<fieldset>
<label for="phoneMask" class="text-white-dark">x-mask="'(###) ###-####'" ((999) 999-9999)</label>
<input id="phoneMask" type="text" placeholder="(___) ___-____" class="form-input" x-mask="(999) 999-9999" />
</fieldset>
</form>
Currency
Code
<!-- currency -->
<form>
<fieldset>
<label for="currencyMask" class="text-white-dark">$999,9999,999.99</label>
<input id="currencyMask" type="text" placeholder="$___,____,___.__" class="form-input" x-mask="$999,9999,999.99" />
</fieldset>
</form>
© . Vristo All rights reserved.