@bdt-component-library/masked-text-field NPM

MaskedTextField Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of masked text fields according to style guide conventions.

https://zeroheight.com/990ea04ab/p/98b6fb-input-fields

API

prop	type	required	default	explanation
className	string	no	n/a	Adds an optional classname to the component
id	string	no	n/a	Adds an optional id to the component
value	string	no	no	Input value
defaultValue	string	no	no	Input default value
name	string	no	no	Input name attr
required	boolean	no	false	Determines if the input is required
inputRef	any	no	no	React ref for input
helperText	string	no	no	Input helper text
onChange	function	no	undefined	Event handler for onchange events
autoFocus	boolean	no	false	Input autoFocus attr
disabled	boolean	no	undefined	Determines input disabled state
variant	enum("phone", "phonePrivate, "ssn", "money", "date")	no	"phone"	Determines masked text field type
noBottomMargin	boolean	no	false	Removes bottom margin of input for more control over formatting
placeholder	string	no	none	Allows default placeholder to show when input is empty
leadingIcon	React element OR false	no	false	Passes icon from MaskedTextField to TextField
onBlur	function(e: event)	no	() => {}	Event handler for onblur events
hasError	boolean	no	false	Determines error state
readOnly	boolean	no	false	Property that prevents the user from entering text in the input