# Masked Text Input

Masked Text Input is a normal input with some styling applied and the ability to perform in-line formatting for things such as credit cards, dates, etc.

Masked Text Input is intended to be wrapped by another component, which would then pass down the specific type of masked text it is (credit card, date, etc).

Masked Text Input supports the following props:

- `type`: one of ['date', 'email', 'number', 'text', 'password']
- `placeholder`
- `value`
- `focusOnMount`: should the component have focus when it mounts
- `disabled`
- `error`: either a string or boolean
- `options`: an object specifying which type of masked input it should be and which validations are present

The `options` prop looks like the following:

- `date`: boolean - whether or not we should use date formatting
- `datePattern`: array of strings where ['d', 'm', 'y'] yields the format DD/MM/YYYY
- `delimiter`: string
- `phone`: boolean - whether or not we should use phone formatting
- `phoneRegionCode`: string - country code for the phone number formatting we want to use

Masked Text Input supports the following events:

- `onChange={value => console.log('Omg look a', value)}` where `value` is the string from the Masked Text Input
- `onFocus={() => console.log('focusing')}`
- `onBlur={() => console.log('blurring')}`
