# EuiInputNumberComponent

**Type:** component

<p>Input number component that allows the user to enter a number. It supports number
formatting and validation. It uses Cleave.js to format the number. It depends on
the {@link LocaleService} to get the current locale and format the number accordingly.</p>
<p>It supports the following attributes:</p>
<ul>
<li>{@link min}: The minimum number can be entered. Blocks user&#39;s input if not in range.</li>
<li>{@link max}: The maximum number can be entered. Blocks user&#39;s input if not in range.</li>
<li>{@link leadingZero}: Adds leading zero to a number. Formatting will not work.</li>
<li>{@link isInvalid}: Sets the invalid state of the input element.</li>
<li>{@link fractionDigits}: Determines how many digits to show after the decimal point.</li>
<li>{@link digits}: Determines how many digits to show before the decimal point.</li>
<li>{@link fillFraction}: Fills the decimal part with zeros in case it&#39;s less than the fractionDigits.</li>
<li>{@link roundUp}: Rounds a number with more than two decimals UP.</li>
<li>{@link noFormat}: Disables the number formatting. It will be treated as a plain number.</li>
<li>{@link value}: The value of the input element.</li>
<li>{@link placeholder}: The placeholder value of the input element.</li>
<li>{@link euiClearable}: Adds a clear button to the input element.</li>
<li>{@link euiLoading}: Adds a loading spinner to the input element.</li>
<li>{@link readonly}: Disables the input element.</li>
<li>{@link disabled}: Disables the input element.</li>
<li>{@link euiDanger}: Sets the invalid state of the input element.</li>
<li>{@link euiSuccess}: Sets the success state of the input element.</li>
<li>{@link euiWarning}: Sets the warning state of the input element.</li>
<li>{@link euiInfo}: Sets the info state of the input element.</li>
<li>{@link euiPrimary}: Sets the primary state of the input element.</li>
<li>{@link euiSecondary}: Sets the secondary state of the input element.</li>
</ul>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputNumber [(ngModel)]=&quot;amount&quot; [fractionDigits]=&quot;2&quot; /&gt;</code></pre></div><h3>With Min/Max Range</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputNumber [min]=&quot;0&quot; [max]=&quot;100&quot; [(ngModel)]=&quot;percentage&quot; /&gt;</code></pre></div><h3>Currency Format</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputNumber [fractionDigits]=&quot;2&quot; [fillFraction]=&quot;true&quot; placeholder=&quot;0.00&quot; /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use associated <code>&lt;label&gt;</code> with <code>for</code> attribute</li>
<li>Invalid state is communicated via <code>aria-invalid</code></li>
<li>Min/max constraints are enforced during input</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically formats numbers based on current locale</li>
<li>Supports large numbers as strings to avoid precision loss</li>
<li>Use <code>fillFraction</code> for consistent decimal display (e.g., currency)</li>
<li><code>roundUp</code> parameter controls decimal rounding behavior</li>
</ul>


**Selector:** `input[euiInputNumber]`

**Standalone:** false

## Inputs

- **digits**: `number, NumberInput` - <p>determines how many digits to show before the decimal point</p>

- **fillFraction**: `boolean, BooleanInput` - <p>fills the decimal part with zeros in case it&#39;s less than the fractionDigits</p>

- **fractionDigits**: `number, NumberInput` - <p> determines how many digits to show after the decimal point
 @default 0</p>

- **isInvalid**: `boolean, BooleanInput` - 
- **leadingZero**: `number, NumberInput` - <p>Adds leading zero to a number. Formatting will not work.
     e.g. with leadingZero=3 input number 5 =&gt; 005</p>

- **max**: `number, NumberInput` - <p>The maximum number can be entered. Blocks user&#39;s input if not in range.</p>

- **min**: `number, NumberInput` - <p>The minimum number can be entered. Blocks user&#39;s input if not in range.</p>

- **noFormat**: `boolean, BooleanInput` - <p>Disables the number formatting. It will be treated as a plain number.
Will do a thousand grouping of number.</p>

- **roundUp**: `number, NumberInput` - <p>rounds a number with more than two decimals UP</p>

- **value**: `undefined` - <p>The value of the input element.</p>

- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` - 
