Skip to main content

bp-sdk-masked-input

Custom element hooks

NameDescription
bp-sdk-external-masked-inputdisables html

Classes

NameDescription
bp-sdk-masked__containerRoot div element
bp-sdk-masked__contentDiv element surrounding inputs, blur toggle button, and error text
bp-sdk-masked__inputInput element
bp-sdk-masked__input--blursInput element that can blur
bp-sdk-masked__buttonButton element that toggles blur state

Properties

PropertyAttributeDescriptionTypeDefault
answerIdanswer-idAnswer idstringundefined
answeredBySourceanswered-by-sourceSpecifically how the question was answered (ie. "ACORD 126")stringundefined
autoCompleteauto-completeAutocomplete attribute value for inputstringundefined
canHidecan-hideWhen true, the input can be toggled between text and password modes. In text mode, the input displays the text entered by the user as is. In password mode, the input obfuscates the text value (usually with * or ).booleanfalse
codecodequestion codestringundefined
errorTexterror_textError messagestringundefined
errors--Error messagesany[][]
fieldTypefield_typefield typestringundefined
helpTexthelp-textHelp textstringundefined
isCompletedis_completedIs answer in complete statebooleanfalse
isReadOnlyis-read-onlyWhen true, the field will be readonly. It will display only the label and value as plain text.booleanfalse
labellabelLabel to usestringundefined
labelIdlabel-idAria label id's that describes input for screen readersstringundefined
labelledBylabelled-byLabels that describe groupstringundefined
maskmaskMask pattern to be applied to the input in visible mode. See the documentation of the InputMask package for valid mask patterns.stringundefined
maxmax_valuemaximum valuenumberundefined
maxDatemax_datemaximum date valuestringundefined
minmin_valueminimum valuenumberundefined
minDatemin_dateminimum date valuestringundefined
options--Options for input mask. Supported options are: placeholder (string) - This character will be used in the mask and input placeholder to represent where user input is expected (i.e. non-separator characters). For example, a date mask of dd/mm/yyyy with # as a placeholder character will display as ##/##/####. prefix (string) - This text will be displayed at the start of the mask and input placeholder. For example, for a mask of 0.00, a prefix of $, and a placeholder of #, the mask displayed in the input will be $#.##.IMaskOptionsundefined
patternpatternRegex pattern to matchstringundefined
placeholderplaceholderPlaceholder to displaystring''
pristinepristineIs pristinebooleantrue
questionIdquestion_idQuestion idstringundefined
requiredrequiredDetermines if input is requiredbooleanfalse
touchedtouchedIs touchedbooleanfalse
useComplexMaskLogicuse-complex-mask-logicWhen this prop is true, and a valid answer for this question has been synced to the backend, if the user edits the value without providing a valid answer, the original persisted answer will be restored. Additionally, the formatting mask will be temporarily disabled until the user makes edits to the answer field. This allows an obfuscated form of the answer (i.e. 12345 -> ***45) to be provided by the backend without conflicting with the requirements of the mask pattern.booleanfalse
valuevalueCurrent valuestringundefined

Events

EventDescriptionType
valueUpdateCustomEvent<string>

Dependencies

Used by

Depends on

Graph

graph TD; bp-sdk-masked-input --> bp-sdk-errors-container bp-sdk-masked-input --> bp-sdk-masked-input-button bp-sdk-masked-input --> bp-sdk-icon-container bp-sdk-errors-container --> bp-sdk-errors bp-sdk-masked-input-container --> bp-sdk-masked-input style bp-sdk-masked-input fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS