MaskedInput Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a MaskedInput LWC ReadMe for each Vlocity release.

Managed Package app icon 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(), not Number. See Example masked-inputComponent on this page.
For date, use c-input element 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(), not Number. See Example masked-input Component on this page.
For date, use c-input element 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.

To Note

For the currency' and `number' masks, the value of the mask parameter must be `new Number(), not Number. See Example masked-input Component on this page.
For date, use c-input element 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: '.'
  }