# Masked Text Input

Masked Text Input is an internal implementation detail of several other form components (e.g. TextInput, SearchInput). Do not consume it directly outside Patchwork.

It 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 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')}`
