# Masked input

Input masks are powered by the plugin react-input-mask. Please refer there documentation for further details and instructions here https://github.com/sanniassin/react-input-mask

# How to use

import InputMask from "react-input-mask";

<div>
  <div className="form-group">
    <label>Date</label>
    <InputMask mask="99/99/9999">
      {() => <input type="text" id="date" className="form-control" />}
    </InputMask>
    <span className="help">e.g. "25/12/2020"</span>
  </div>
  <div className="form-group">
    <label>Telephone</label>
    <InputMask mask="(999) 999-9999">
      {() => <input type="text" id="phone" className="form-control" />}
    </InputMask>
    <span className="help">e.g. "(324) 234-3243"</span>
  </div>
  <div className="form-group">
    <label>Custom</label>
    <InputMask mask="99-9999999">
      {() => <input type="text" id="tin" className="form-control" />}
    </InputMask>
    <span className="help">e.g. "23-4324324"</span>
  </div>
  <div className="form-group">
    <label>Social Security Number</label>
    <InputMask mask="999-99-9999">
      {() => (
        <input
          type="text"
          id="ssn"
          className="form-control"
          placeholder="You can put anything here"
        />
      )}
    </InputMask>
    <span className="help">e.g. "432-43-2432"</span>
  </div>
</div>;