Taiga UI 5.0 is out!

InputNumber KIT

Examples API GitHub

On this page

See also

InputSlider, InputRange, Range, Slider, MoneyInputNumber is a form field to provide numerical input.

Number as form control value

By default, form control value is number or null when empty

Control value:null

    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Enter a number</label>

    <input
        tuiInputNumber
        [formControl]="control"
    />
</tui-textfield>
<tui-error [formControl]="control" />

<p>
    <strong>Control value:</strong>
    <code>{{ control.value | json }}</code>
</p>

BigInt as form control value

Form control value type can be changed to bigint .

Just put bigint attribute and set new values for min , max and precision properties.

Control value:777900719925474099100n

    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Enter a really huge integer</label>

    <input
        bigint
        tuiInputNumber
        [(ngModel)]="value"
    />
</tui-textfield>

<p>
    <strong>Control value:</strong>
    <code>{{ stringified() }}</code>
</p>

Textfield-based

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore its documentation page for more customization options. 
    
      
    

      
      
    

  
    
      <tui-textfield
    iconStart="@tui.euro"
    tuiTextfieldSize="m"
>
    <label tuiLabel>I am a label</label>

    <input
        placeholder="I am placeholder"
        tuiInputNumber
        [(ngModel)]="value"
    />

    <tui-icon
        icon="@tui.circle-alert"
        style="color: var(--tui-status-negative)"
    />

    <tui-icon tuiTooltip="I am a hint" />
</tui-textfield>

Localization

TuiNumberFormat allows to customize separators specific for your locale. 
    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Type number like a German</label>

    <input
        tuiInputNumber
        [tuiNumberFormat]="numberFormat"
        [(ngModel)]="value"
    />

    <tui-icon
        tuiHintDirection="end"
        tuiTooltip="In Germany people use comma as decimal separator and point for thousands"
    />
</tui-textfield>

Affixes

Use prefix / postfix parameters to set non-removable text before / after the number.

For currency symbols, use the Currency pipe.

TuiNumberFormat with negativePattern: 'minusFirst' allow to position the minus sign before the currency symbol. 

    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Balance</label>

    <input
        tuiInputNumber
        [prefix]="'USD' | tuiCurrency"
        [tuiNumberFormat]="{negativePattern: 'minusFirst'}"
        [(ngModel)]="value"
    />
</tui-textfield>

Step

A positive value of the step property enables side buttons to increase / decrease the number by the specified step value. Additionally, the ArrowUp / ArrowDown keyboard keys provide the same functionality. 
    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Percentage</label>

    <input
        postfix="%"
        tuiInputNumber
        [max]="100"
        [min]="0"
        [step]="1"
        [(ngModel)]="value"
    />
</tui-textfield>

Custom step buttons 

    
      
    

      
      
    

  
    
      <tui-textfield [tuiTextfieldCleaner]="false">
    <input
        tuiInputNumber
        [min]="0"
        [(ngModel)]="value"
        (keydown.arrowDown)="onStep(-1)"
        (keydown.arrowUp)="onStep(+1)"
    />

    <button
        appearance="floating"
        size="s"
        tuiButton
        type="button"
        (click.prevent)="onStep(+100)"
    >
        + 100
    </button>

    <button
        appearance="floating"
        size="s"
        tuiButton
        type="button"
        (click.prevent)="onStep(+1000)"
    >
        + 1000
    </button>
</tui-textfield>

    

      
      
    

  
    
      [tuiButton] {
    border-radius: 10rem;
    margin-inline-start: 0.125rem;
}

Fluid typography

Use FluidTypography directive to adjusts font size for the textfield value to fit in the textfield box. 
    
      
    

      
      
    

  
    
      <tui-textfield [style.width.rem]="10">
    <input
        postfix=" €"
        tuiFluidTypography
        tuiInputNumber
        [min]="0"
        [(ngModel)]="value"
    />
</tui-textfield>

Value transformer

TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic.

This example demonstrates how to use NaN -value for empty textfield instead of default null -value to keep type strictly "number" .

Control value: NaN

    
      
    

      
      
    

  
    
      <tui-textfield>
    <input
        placeholder="Form control contains NaN"
        tuiInputNumber
        [(ngModel)]="value"
    />
</tui-textfield>

<p>
    Control value:
    <code>{{ value.toString() }}</code>
</p>

Quantum

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event.

In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

Control value:

0.5
    
      
    

      
      
    

  
    
      <tui-textfield>
    <input
        tuiInputNumber
        [max]="1"
        [min]="0"
        [quantum]="0.05"
        [(ngModel)]="value"
    />
</tui-textfield>

<p><strong>Control value:</strong></p>
<code>{{ value | json }}</code>

Large integer and large decimal parts

JavaScript’s built‑in number type loses precision when a value contains too many digits in either the integer part, the decimal part, or both.

The built‑in bigint type avoids this issue but supports only integers.

If you need to preserve all extremely large digits of both parts, you can override the built‑in TuiValueTransformer and store the number as an {significand: bigint; exp: number} instead.

Control value:

{
  "significand": "123456700042n",
  "exp": -5
}
    
      
    

      
      
    

  
    
      <tui-textfield>
    <input
        bigintWithDecimal
        postfix=" per day"
        prefix="$"
        tuiInputNumber
        [max]="infinity"
        [min]="0"
        [tuiNumberFormat]="{precision: infinity, decimalSeparator: '.'}"
        [(ngModel)]="value"
    />
</tui-textfield>

<p><strong>Control value:</strong></p>
<pre><code>{{ stringified() }}</code></pre>
GitHub StackBlitz