eui documentation
  1. Components
  2. EuiInputNumberComponent

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.

Basic Usage

Example :
<input euiInputNumber [(ngModel)]="amount" [fractionDigits]="2" />

With Min/Max Range

Example :
<input euiInputNumber [min]="0" [max]="100" [(ngModel)]="percentage" />

Currency Format

Example :
<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

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
Methods
Inputs
HostBindings
HostListeners
Accessors

Constructor

constructor()

Inputs

digits
Type : number, NumberInput
Default value : undefined, { transform: numberAttribute }

determines how many digits to show before the decimal point
fillFraction
Type : boolean, BooleanInput
Default value : undefined, { transform: booleanAttribute }

fills the decimal part with zeros in case it's less than the fractionDigits
fractionDigits
Type : number, NumberInput
Default value : 0, { transform: (v: unknown) => numberAttribute(v, 0) }

determines how many digits to show after the decimal point @default 0
isInvalid
Type : boolean, BooleanInput
Default value : undefined, { transform: this.invalidTransform }
leadingZero
Type : number, NumberInput
Default value : 0, { transform: (v: unknown) => numberAttribute(v, 0) }

Adds leading zero to a number. Formatting will not work. e.g. with leadingZero=3 input number 5 => 005
max
Type : number, NumberInput
Default value : undefined, { transform: numberAttribute }

The maximum number can be entered. Blocks user's input if not in range.
min
Type : number, NumberInput
Default value : undefined, { transform: numberAttribute }

The minimum number can be entered. Blocks user's input if not in range.
noFormat
Type : boolean, BooleanInput
Default value : undefined, { transform: booleanAttribute }

Disables the number formatting. It will be treated as a plain number. Will do a thousand grouping of number.
roundUp
Type : number, NumberInput
Default value : undefined, { transform: numberAttribute }

rounds a number with more than two decimals UP
value

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

class
Type : string

CSS classes to be added to the host element.

HostListeners

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

Methods

onPaste
onPaste(event: ClipboardEvent)
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

cssClasses
getcssClasses()

CSS classes to be added to the host element.

Returns : string

results matching ""

    No results matching ""