### File

`packages/components/eui-input-number/eui-input-number.component.ts`

### Description

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 LocaleService to get the current locale and format the number accordingly.

It supports the following attributes:

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

### Extends

`InputDirective`

### Implements

`OnInit` `OnDestroy` `DoCheck` `OnChanges`

### Metadata

HostDirectives | `EuiClearableDirective` Inputs : euiClearable readonly disabled `EuiLoadingDirective` Inputs : euiLoading readonly
host | `{ }`
selector | `input[euiInputNumber]`
styleUrls | `./eui-input-number.scss`

### Index

###### Properties
cleaveInstance onChange Public onChangeCallback onTouched
###### Methods
onPaste getCssClasses
###### Inputs
digits fillFraction fractionDigits isInvalid leadingZero max min noFormat roundUp value disabled euiDanger euiDisabled placeholder readonly
###### HostBindings
attr.type class
###### HostListeners
focusout keydown paste
###### Accessors
isInvalid cssClasses fractionDigits

### Constructor

`constructor()`

### Inputs

digits
Type : `number`
determines how many digits to show before the decimal point

fillFraction
Type : `boolean`
fills the decimal part with zeros in case it's less than the fractionDigits

fractionDigits
Type : `number`
determines how many digits to show after the decimal point

isInvalid
Type : `boolean`

leadingZero
Type : `number`
Default value : `0`
Adds leading zero to a number. Formatting will not work. e.g. with leadingZero=3 input number 5 => 005

max
Type : `number`
The maximum number can be entered. Blocks user's input if not in range.

min
Type : `number`
The minimum number can be entered. Blocks user's input if not in range.

noFormat
Type : `boolean`
Disables the number formatting. It will be treated as a plain number. Will do a thousand grouping of number.

roundUp
Type : `number`
rounds a number with more than two decimals UP

value
Type : `string`
The value of the input element.

disabled
Type : `boolean`

euiDanger
Type : `boolean`
Default value : `false`

euiDisabled
Type : `boolean`
Default value : `false`

placeholder
Type : `string | null`

readonly
Type : `any`

### HostBindings

attr.type
Type : `string`
Default value : `'eui-number'`

class
Type : `string`
CSS classes to be added to the host element.

### HostListeners

focusout
`focusout()`

keydown
Arguments : `'$event'`
`keydown(e: KeyboardEvent)`

paste
Arguments : `'$event'`
`paste(event: ClipboardEvent)`

### Methods

onPaste
`onPaste(event: ClipboardEvent)`
Decorators : `@HostListener('paste', ['$event'])`
Parameters :
Name | Type | Optional
event | `ClipboardEvent` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

cleaveInstance
Type : `CleaveInstance`
holds an instance of cleave.js

onChange
Type : `function`
Default value : `() => {...}`

Public onChangeCallback
Type : `function`

onTouched
Type : `function`
Default value : `() => {...}`

### Accessors

isInvalid
get `isInvalid()`
set `isInvalid(state: BooleanInput)`
Parameters :
Name | Type | Optional
state | `BooleanInput` | No
Returns : `void`

cssClasses
get `cssClasses()`
CSS classes to be added to the host element. Returns : `string`

fractionDigits
get `fractionDigits()`
determines how many digits to show after the decimal point Returns : `number`
set `fractionDigits(value: NumberInput)`
Parameters :
Name | Type | Optional
value | `NumberInput` | No
Returns : `void`

# results matching ""

# No results matching ""