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

Jsx

Props

import React from 'react';
import { Form } from 'react-bootstrap';
import InputMask from 'react-input-mask';

const FormMaskExample = () => {
  return (
    <Form>
        <Form.Group className="mb-3" controlId="formGroupPhone">
            <Form.Label>Phone</Form.Label>
            <InputMask className='form-control' mask="(999) 999-9999" />
            <Form.Text className="text-muted">(999) 999-9999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupDate">
            <Form.Label>Date</Form.Label>
            <InputMask className='form-control' mask="99/99/9999" />
            <Form.Text className="text-muted">dd/mm/yyyy</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupSSN">
            <Form.Label>SSN field 1</Form.Label>
            <InputMask className='form-control' mask="999-99-9999" />
            <Form.Text className="text-muted">e.g "999-99-9999"</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupPhoneField">
            <Form.Label>Phone field + ext.</Form.Label>
            <InputMask className='form-control' mask="+40 999 999 999" />
            <Form.Text className="text-muted">+40 999 999 999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupProductKey">
            <Form.Label>Product Key</Form.Label>
            <InputMask className='form-control' mask="a*-999-a999" />
            <Form.Text className="text-muted">e.g a*-999-a999</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupCurrency">
            <Form.Label>Currency</Form.Label>
            <InputMask className='form-control' mask="$ 999,999,999.99" />
            <Form.Text className="text-muted">$ 999,999,999.99</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupDate_2">
            <Form.Label>Date 2</Form.Label>
            <InputMask className='form-control' mask="99-99-9999" />
            <Form.Text className="text-muted">dd-mm-yyyy</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupEyeScript">
            <Form.Label>Eye Script</Form.Label>
            <InputMask className='form-control' 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" controlId="formGroupPercent">
            <Form.Label>Percent</Form.Label>
            <InputMask className='form-control' mask="99%" />
            <Form.Text className="text-muted">e.g "99%"</Form.Text>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formGroupPcIp">
            <Form.Label>Pc Ip</Form.Label>
            <InputMask className='form-control' mask="999.999.999.9999" />
            <Form.Text className="text-muted">e.g 999.999.999.9999</Form.Text>
        </Form.Group>
    </Form>

  );
}

export default FormMaskExample;

Props	Type	Default	Description
mask	{"String\|Array <String, RegExp>"}		Mask format
maskPlaceholder	String	_	Placeholder to cover unfilled parts of the mask
alwaysShowMask	Boolean	false	Whether mask prefix and placeholder should be displayed when input is empty and has no focus
beforeMaskedStateChange	Function		Function to modify value and selection before applying mask
children	ReactElement		Custom render function for integration with other input components

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.