# EuiInputNumberComponent

**Type:** component



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.

It supports the following attributes:
- {@link min}: The minimum number can be entered. Blocks user's input if not in range.
- {@link max}: The maximum number can be entered. Blocks user's input if not in range.
- {@link leadingZero}: Adds leading zero to a number. Formatting will not work.
- {@link isInvalid}: Sets the invalid state of the input element.
- {@link fractionDigits}: Determines how many digits to show after the decimal point.
- {@link digits}: Determines how many digits to show before the decimal point.
- {@link fillFraction}: Fills the decimal part with zeros in case it's less than the fractionDigits.
- {@link roundUp}: Rounds a number with more than two decimals UP.
- {@link noFormat}: Disables the number formatting. It will be treated as a plain number.
- {@link value}: The value of the input element.
- {@link placeholder}: The placeholder value of the input element.
- {@link euiClearable}: Adds a clear button to the input element.
- {@link euiLoading}: Adds a loading spinner to the input element.
- {@link readonly}: Disables the input element.
- {@link disabled}: Disables the input element.
- {@link euiDanger}: Sets the invalid state of the input element.
- {@link euiSuccess}: Sets the success state of the input element.
- {@link euiWarning}: Sets the warning state of the input element.
- {@link euiInfo}: Sets the info state of the input element.
- {@link euiPrimary}: Sets the primary state of the input element.
- {@link euiSecondary}: Sets the secondary state of the input element.

### Basic Usage
```html
<input euiInputNumber [(ngModel)]="amount" [fractionDigits]="2" />
```

### With Min/Max Range
```html
<input euiInputNumber [min]="0" [max]="100" [(ngModel)]="percentage" />
```

### Currency Format
```html
<input euiInputNumber [fractionDigits]="2" [fillFraction]="true" placeholder="0.00" />
```

### Accessibility
- Use associated `<label>` with `for` attribute
- Invalid state is communicated via `aria-invalid`
- Min/max constraints are enforced during input

### Notes
- Automatically formats numbers based on current locale
- Supports large numbers as strings to avoid precision loss
- Use `fillFraction` for consistent decimal display (e.g., currency)
- `roundUp` parameter controls decimal rounding behavior


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

## Inputs
- **digits**: `number, NumberInput` - determines how many digits to show before the decimal point
- **fillFraction**: `boolean, BooleanInput` - fills the decimal part with zeros in case it's less than the fractionDigits
- **fractionDigits**: `number, NumberInput` - determines how many digits to show after the decimal point  @default 0
- **isInvalid**: `boolean, BooleanInput` - 
- **leadingZero**: `number, NumberInput` - Adds leading zero to a number. Formatting will not work.      e.g. with leadingZero=3 input number 5 => 005
- **max**: `number, NumberInput` - The maximum number can be entered. Blocks user's input if not in range.
- **min**: `number, NumberInput` - The minimum number can be entered. Blocks user's input if not in range.
- **noFormat**: `boolean, BooleanInput` - Disables the number formatting. It will be treated as a plain number. Will do a thousand grouping of number.
- **roundUp**: `number, NumberInput` - rounds a number with more than two decimals UP
- **value**: `undefined` - The value of the input element.
- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` - 
- **euiClearable**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **readonly**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **disabled**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **euiLoading**: `any` - From host directive: #[[file:EuiLoadingDirective.md]]
- **readonly**: `any` - From host directive: #[[file:EuiLoadingDirective.md]]