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

import { MaskedInput } from '@curology/ui-components-web/react/MaskedInput';

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

Controlled Masked Input

Like all form inputs, a MaskedInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

SSN

import { MaskedInput } from '@curology/ui-components-web/react/MaskedInput';

<MaskedInput
  ...
  value={someValue}
  onChange={(evt, value) => ...}
/>

Props

MaskedInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
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
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
iconEnd	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the end of the input.
iconStart	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		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	false | true	false	No	Should a textarea be used instead of an input?
onChange	FormControlChangeEventHandler		No	Emit a new value when the input's selected value changes.
resize	false | true	false	No	Can the textarea be resized?
rows	string | number		No	How many rows call should the multiline input be?
state	"" | "critical" | "warning" | "success"	''	No	The state of the field