logo polydile dile-components


This component extends from dile-input.

The main diference is that the dile-input-integer only allow to introduce integer values. So, when the user put the focus out the input, there is performed a validation and eventually the input changes it's contents to ensure has an integer value.


npm install @dile/dile-input


Import the component.

import '@dile/dile-input/dile-input-integer';

Use the component


Custom style

By default, this input component aligns the input text to the right. if you want to align to the left you may use --dile-input-text-align CSS custom property.

Further informations

All the properties, events, methods, custom properties, are the same. Please check dile-input for more information.

dile-input-integer demo

Regular integer input

<dile-input-integer name="quantity" label="Quantity" placeholder="Quantity"></dile-input-integer>

Text align to the left

.alignleft {
  --dile-input-text-align: left;

<dile-input-integer class="alignleft" name="quantity" label="Quantity" placeholder="Quantity"></dile-input-integer>