MaskedInput

an input field with formalized syntax

Storybook

CodeSandbox

Github

Using Grommet for HPE?See MaskedInput examples and guidance.

Props

a11yTitle

Custom title to be used by screen readers.

string

"a user friendly label for screen readers"

dropHeight

The height of the drop container.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"string"

dropProps

Any valid Drop prop.

object

{}

focusIndicator

Whether the plain MaskedInput should receive a focus outline.

boolean

true

false

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

<Icon />

id

The id attribute of the input.

string

"InputId"

mask

Describes the structure of the mask.

array

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. If the options prop is specified restrictToOptions can be set to false to allow input that differs from the items in options.


[
  {
    length: number | [number],
    fixed: "string",
    options: [string] | [number],
    regexp: {},
    placeholder: "string",
    restrictToOptions: true
  }
]

name

The name attribute of the input.

string

"name"

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.

boolean

true

false

size

The size of the text.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"2xl"

"3xl"

"4xl"

"5xl"

"6xl"

"string"

textAlign

How to align the text inside the input.

string

"start"

"center"

"end"

value

What text to put in the input. The caller should ensure that it is initially valid with respect to the mask.

string

"example@my.com"

number

React/DOM Properties

At its core, the MaskedInput component is a regular <input> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for input elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.hover.background

The background style when hovering.

string

A hex, name, or rgb value.

"active"

object

{ color: "active", opacity: "medium" }

global.hover.color

The text color when hovering.

string

A hex, name, or rgb value.

"black"

object

An object with a color for dark and light modes.

{ dark: "white", light: "black" }

maskedInput.extend

Any additional style for MaskedInput.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

maskedInput.container.extend

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

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

text.medium

The size of the text for MaskedInput.

string

"18px"

maskedInput.disabled.opacity

The opacity when the MaskedInput is disabled.

string

"medium"

number

0.5

global.control.disabled.opacity

The opacity when a component is disabled.

number

0.3

global.focus.border.color

The border color of the component when in focus.

string

A hex, name, or rgb value.

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.color

The outline color around the component when in focus.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.size

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

string

"2px"

global.focus.shadow.color

The shadow color around the component when in focus.

string

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.shadow.size

The size of the shadow around the component when in focus.

string

"2px"

global.colors.placeholder

The placeholder color used for the component.

string

"#AAAAAA"

global.input.font.height

The line-height of the text.

string

"normal"

global.input.font.size

The size of the text.

string

"18px"

global.input.font.weight

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

string

"bold"

number

global.input.weight

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

string

"bold"

number

global.input.padding

The padding of the text.

string

"12px"

object

An object specifying padding for different sides of the component.


{ 
  top: "string", 
  bottom: "string", 
  left: "string", 
  right: "string", 
  horizontal: "string", 
  vertical: "string" 
}

global.input.extend

Any additional style for an input.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}