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 |