Mask

import Mask from 'frui/fields/Mask';

Copy

Props

Masks accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string\|number	No	Default value (Uncontrolled)
error	string\|boolean	No	Any error message
mask	string	Yes	Mask format to validate input
name	string	No	Used for react server components.
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
value	string\|number	No	Default value (Controlled)

Masks are a wrapper for inputmask. This mask field extends Input with an additional mask prop.

<Mask mask="999-999-9999" placeholder="999-999-9999" />

Copy

Masks uses a combination of the following masking definitions to allow which characters to be entered and in which order.

It is possible to define some parts in the mask as optional. This is done by using [ ].

<Mask mask="(99) 9999[9]-9999" placeholder="(99) 9999[9]-9999" />

Copy

onUpdate is like onChange except the value is passed instead of the change event.

<Mask mask="999-999-9999" onUpdate={value => alert(value)} />

Copy

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

You can pass the error prop to highlight the input field red.

<Mask error mask="999-999-9999" placeholder="999-999-9999" />

Copy