Masked Input

Conforms user input to a pre-defined pattern.

Examples

Basic Masked Input

Providing a mask prop will guide the user in their entry. Simple regex patterns define allowed values.

SSN

<MaskedInput
  label="SSN"
  mask={[/[1-9]/, /d/, /d/, '-', /d/, /d/, '-', /d/, /d/, /d/, /d/]}  
  placeholder="123-45-6789"
/>

Props

Name	Type	Default Value	Required	Description
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
iconEnd	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null		No	An icon to render at the end of the input.
iconStart	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null		No	An icon to render at the front of the input.
label	ReactNode		No	A string or component to display as a label above the input
multiline	boolean	false	No	Should a textarea be used instead of an input?
onChange	FormControlChangeEventHandler<InputType, string | number | readonly string[] | (string | number | readonly string[])[]> | undefined		No	Emit a new value when the input's selected value changes.
required	boolean	false	No	Is the field required?
resize	boolean	false	No	Can the textarea be resized?
rows	string | number		No	How many rows call should the multiline input be?
size	undefined	FormControlSize.Medium	No	The size of the field
state	"" | FormControlState | "critical" | "warning" | "success"	FormControlState.Default	No	The state of the field