InputBox is an input element that supports the following key features:
- Responsive by default with multiple size support
- Validation display built in
- Input masking support
- Adornments - icon or text prefixes and suffixes
Width (control is responsive by default) :
```js
<>
```
Sizing:
```js
<>
```
Input masks:
```js
initialState = {
usPhone: '',
date: '',
time: '',
duration: ''
};
<>
{
setState({ usPhone: e.target.value });
}}
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
/>
{
setState({ date: e.target.value });
}}
mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
/>
{
setState({ time: e.target.value });
}}
mask={[/\d/, /\d/, ':', /\d/, /\d/]}
/>
```
Error state (no message):
```js
```
Error with message:
```js
<>
```
Disabled:
```js
```
Prefixes and suffixes:
```js
const Clock = require('components/Icons/Clock').default;
<>
alert('clicked')}} />
alert('clicked')}} />
alert('clicked')}} />
alert('clicked')}} />
```
Custom icon colour:
```js
const Steam = require('components/Icons/Steam').default;
<>
alert('ouch')}} />
```