You are here:
MaskedInput Lightning Web Component ReadMe (Managed Package)
For the managed package runtime, this page contains a MaskedInput LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Summer '20
The MaskedInput Lightning Web Component controls what and how a user can enter data in form input fields. The MaskedInput Lightning Web Componentextends the Input Lightning Web Component.
For possible use cases for the masked-input component, see imask documentation.
Available c-masked-input Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
currency |
string |
|
Enables user to set currency code. |
|
imask |
JSON |
object |
yes |
Contains the valid imask attribute JSON. |
inputmode |
string |
|
Enables user to set inputmode which corresponds to different keypads on mobile. |
|
locale |
string |
|
Enables user to set locale for the currency type. |
Public Variables to Access Value
Name |
Description |
|---|---|
maskedValue |
Returns value with masking. |
typedValue |
Returns the valid value based on type. |
unmaskedValue |
Returns value without masking. |
To Note
-
For the 'currency' and 'number' masks, the value of the mask parameter must be
new Number(), notNumber. See Example masked-inputComponent on this page. -
For date, use
c-inputelement where type is set to 'date'.
Example c-masked-input Component
<c-masked-input
imask={maskAttrib}
class="slds-p-top_small"
theme={theme}
label="InputMask"
value="123456"
type="text"
>
</c-masked-input>
maskAttrib ={
mask: new Number(),
thousandsSeparator: ',',
radix: '.'
}
Label Slot Usage
A named slot (name = label) is available in the event a user would like to dynamically insert markup next to the input's label. This feature is not available for formula input.
<c-masked-input
imask={maskAttrib}
class="slds-p-top_small"
theme={theme}
label="InputMask"
value="123456"
type="text"
>
<span slot="label">Additional markup is inserted here</span>
</c-masked-input>Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The MaskedInput Lightning Web Component controls what you can enter in form input fields. The MaskedInput Lightning Web Component extends the Input Lightning Web Component.
Available c-masked-input Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
imask |
JSON |
object |
yes |
Contains the valid imask attribute JSON. |
Public Variables to Access Value
For possible use cases for the masked-input component, see imask documentation.
Name |
Description |
|---|---|
typedValue |
Returns the valid value based on type. |
unmaskedValue |
Returns value without masking. |
maskedValue |
Returns value with masking. |
-
For the 'currency' and 'number' masks, the value of the mask parameter must be
new Number(), notNumber. See Example masked-input Component on this page. -
For date, use
c-inputelement where type is set to 'date'.
Example c-masked-input Component
<c-masked-input
imask="{maskAttrib}"
class="slds-p-top_small"
theme="{theme}"
label="InputMask"
value="123456"
type="text"
>
</c-masked-input> maskAttrib ={
mask: new Number(),
thousandsSeparator: ',',
radix: '.'
}Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The MaskedInput Lightning Web Component controls what you can enter in form input fields. The MaskedInput Lightning Web Component extends theInput Lightning Web Component.
Available c-masked-input Attributes
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
imask |
JSON |
object |
yes |
Contains the valid imask attribute JSON. |
Public Variables to Access Value
For possible use cases for the masked-input component, see imask documentation.
Name |
Description |
|---|---|
typedValue |
Returns the valid value based on type. |
unmaskedValue |
Returns value without masking. |
maskedValue |
Returns value with masking. |
