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

MaskedTextField component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryMaskedTextField from 'https://cdn.skypack.dev/@bdt-component-library/masked-text-field';
</script>

README

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.

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