logo polydile dile-components

dile-input-number-mask

Web Component to create a customized input text in order to input numbers with a display format introuced by a mask.

<dile-input-number-mask label="The label" placeholder="Type your telephone number" mask="00 000-00-00"></dile-input-number-mask>

Install

npm install @dile/dile-input-number-mask

Usage

Import the component.

import '@dile/dile-input-number-mask/dile-input-number-mask.js';

Use the component

<dile-input-number-mask
  name="Telephone"
  label="Text to the label"
  mask="00 000-00-00"
></dile-input-number-mask>

Properties

Mask examples:

This component inherits all the properties, events and styles from @dile/dile-input component. So, you can find more properties in the dile-input component and also many CSS custom properties to customize the component style.

The main diference between dile-input and dile-input-number-mask is that the text input always displays a number with the applied mask.

dile-input-number-mask demos

Telephone mask

<dile-input-number-mask 
  label="Telephone" 
  placeholder="Write your telephone" 
  mask="00 000-00-00"
></dile-input-number-mask>

Bank account mask

<dile-input-number-mask 
  class="account" 
  label="Bank account" 
  placeholder="Write your bank account number" 
  mask="0000 0000 0000 0000"
></dile-input-number-mask>

Input with a value preloaded

<dile-input-number-mask label="Value pre-loaded" 
  value="123456789"
  mask="0*00*0"
></dile-input-number-mask>