grommet
components

MaskedInput

an input field with formalized syntax

Storybook
CodeSandbox

Props

icon

An optional icon to show. This could be used to provide an indication of what kind of input is expected, like an email icon, or what the input will be used for, like a search icon.

"element"

id

The id attribute of the input.
"string"

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.

[
  {
    length: [1, 2],
    regexp: /^1[1-2]$|^[0-9]$/,
    placeholder: 'hh',
  },
  {
    fixed: ':',
  },
  ...
]

name

The name attribute of the input.
"string"

onBlur

Function that will be called when the user leaves the field.
"function"

onChange

Function that will be called when the user types or pastes text.
"function"

reverse

Whether an icon should be reversed so that the icon is at the end of the input.

truefalse

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"number

Theme

global.hover.background

The background style when hovering.
{"color": "active", "opacity": "medium"}

global.hover.color

The text color when hovering.
{"dark": "white", "light": "black"}

maskedInput.extend

Any additional style for MaskedInput.
"any CSS"
(props) => {}

text.medium

The size of the text for MaskedInput.
{
  "size": "18px",
  "height": "24px",
  "maxWidth": "432px"
}

global.focus.border.color

The color around the component when in focus.
"focus"

global.colors.placeholder

The placeholder color used for the component.
"#AAAAAA"

global.input.weight

The font weight of the text entered.
600

global.input.padding

The padding of the text.
"12px"