grommet
Version:
focus on the essential experience
153 lines (101 loc) • 2.15 kB
Markdown
## MaskedInput
An input field with formalized syntax.
[](https://storybook.grommet.io/?selectedKind=MaskedInput&full=0&addons=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=maskedinput&module=%2Fsrc%2FMaskedInput.js)
## Usage
```javascript
import { MaskedInput } from 'grommet';
<MaskedInput id='item' name='item' />
```
## Properties
**id**
The id attribute of the input.
```
string
```
**name**
The name attribute of the input.
```
string
```
**onChange**
Function that will be called when the user types or pastes text.
```
function
```
**onBlur**
Function that will be called when the user leaves the field.
```
function
```
**mask**
Describes the structure of the mask. If a regexp is provided, it should
allow both the final full string element as well as partial strings
as the user types characters one by one. Defaults to `[]`.
```
[{
length:
number
[number],
fixed: string,
options: [string],
regexp:
{
}
}]
```
**size**
The size of the text.
```
small
medium
large
xlarge
string
```
**value**
What text to put in the input. The caller should ensure that it
is initially valid with respect to the mask.
```
string
```
## Intrinsic element
```
input
```
## Theme
**maskedInput.extend**
Any additional style for MaskedInput. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**text.medium**
The size of the text for MaskedInput. Expects `string`.
Defaults to
```
18px
```
**global.focus.border.color**
The color around the component when in focus. Expects `string | { dark: string, light: string }`.
Defaults to
```
focus
```
**global.colors.placeholder**
The placeholder color used for the component. Expects `string`.
Defaults to
```
#AAAAAA
```
**global.input.weight**
The font weight of the text entered. Expects `number`.
Defaults to
```
600
```
**global.input.padding**
The padding of the text. Expects `string`.
Defaults to
```
12px
```