grommet
components

MaskedInput

an input field with formalized syntax

Storybook
CodeSandbox

Props

a11yTitle

Custom title to be used by screen readers.
"string"

dropHeight

The height of the drop container.
"xsmall""small""medium""large""xlarge""string"

dropProps

Any valid Drop prop.
"object"

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. When using regexp to match number values make sure that the option values are numbers as well.

[
  {
    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) => {}

maskedInput.container.extend

Any additional style for the container surrounding the input and, if present, icon.

"any CSS"
(props) => {}

text.medium

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

maskedInput.disabled.opacity

The opacity when the MaskedInput is disabled.
number | string

global.control.disabled.opacity

The opacity when a component is disabled.
0.3

global.focus.border.color

The border color of the component when in focus.
"focus"

global.focus.outline.color

The outline color around the component when in focus.
string | { dark: string, light: string }

global.focus.outline.size

The size of the outline around the component when in focus.
string

global.focus.shadow.color

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

global.focus.shadow.size

The size of the shadow around the component when in focus.
"2px"

global.colors.placeholder

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

global.input.font.height

The line-height of the text.
string

global.input.font.size

The size of the text.
string

global.input.font.weight

The font-weight of the text. This value will only be applied if global.input.weight is undefined.

600

global.input.weight

This value has been deprecated and replaced by global.input.font.weight.

number | string

global.input.padding

The padding of the text.
{
  "horizontal": "11px",
  "vertical": "11px"
}

global.input.extend

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