The input masking works by having a wrapping input--masking element with specific data attributes.

Required data attributes include:

• data-mask="" (can be empty or have a default value)
• and at least one of the following:
• data-masking-singular-left="" (example: $)
• data-masking-singular-right="" (example: %)

Note: At least one singular masking text is required.

Optional data attributes include:

• data-masking-plural-left="": Used for specifying plural masking text
• data-masking-plural-right="": Used for specifying plural masking text (example: months)

Note: Plural masking text is not required. If no plural masking text is added, the singular text will be used for all values. Most of the time you'll probably be adding plural right text for words like "months", "days", etc.

Input masking is set up to work with number inputs (type="number"). The number input needs the following attributes:

• min="0": min can be a whole number or have decimals
• step="1": step can be a whole number or have decimals; step is used to calculate precision

The number input can take optional attributes:

• max="100": max can be a whole number or have decimals
• placeholder=""

Masking sizes:

• input--masking--smallest
• input--masking--smaller
• input--masking--small
• input--masking--medium
• input--masking--large
• input--masking--larger
• input--masking--largest

Note: Masking sizes should match your Input size.

TBD