Text

The Text component renders a input element with a Cleave input mask.

Reference

Value

When maskOptions is not specified, the value is a string

When maskOptions is provided, then the value is an Object with the following structure:

• rawValue
• maskedValue
• maskedSensitiveValue

rawValue

It contains user input without any mask applied to it.

• type: string

maskedValue

It contains user input with maskOptions applied to it and it is exactly what the Cleave input is displaying.

• type: string

maskedSensitiveValue

It contains maskedValue with sensitiveMask applied to it.

• type: string

Properties

• class
• default
• description
• helpText
• helpTextPlacement
• helpTextPosition
• helpTextTitle
• id
• label
• maskOptions
• maxLength
• placeholder
• readOnly
• sensitiveMask
• showLabel
• tag

maskOptions

The maskOptions is a Cleave’s options object.

• type: object
• default value: undefined

NOTE: Text component does not support

{ phone: true }

as a valid Cleave’s options. However it’s possible to create a custom mask for a phone e.g:

{ numericOnly: true, blocks: [4, 3, 3] }

The option above would mask the text 0123456789 into 0123 456 789

sensitiveMask

The sensitiveMask property is only applicable when maskOptions is defined.

Applies an additional mask on top of the one defined by maskOptions and save this value on value.maskedSensitiveValue to be accessible thought tokens

Applying the sensitiveMask:

• it keeps the input's value where the character matches a _ (underline) in sensitiveMask
• where the character does not matches a _ (underline), it’ll replace the input's value by the sensitiveMask character

e.g.

               maskOptions={{creditCard: true}}
         value.maskedValue="5212 3456 7890 1234"
             sensitiveMask="**** **** **** ____"
value.maskedSensitiveValue="**** **** **** 1234"

               maskOptions={{date: true, datePattern: ['Y', 'm', 'd']}
         value.maskedValue="2018/02/01"
             sensitiveMask="____/xx/xx"
value.maskedSensitiveValue="2018/xx/xx"

• type: string
• default value: empty string