Basic number field

Wrap your form controls in a form row

Use the

EuiFormRow component to easily and accessibly associate form components with labels, help text, and error text.

Use a EuiFieldNumber to allow users to enter numbers. This component renders a basic HTML

<input type="number"> element.

Loading...

Native validation

When passed the min, max, or step props, EuiFieldNumber will automatically show an invalid/error state if the user inputs a number outside the min/max range, or a number that is not a multiple of step.

Any native error messages will be visible as a browser tooltip on mouseover.

Loading...

Props

EuiFieldNumber

Extends InputHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop icon# ↦	Description and type Type: IconType | IconShape ↦	Default value ↵
Prop isInvalid# ↦	Description and type Type: boolean ↦	Default value ↵
Prop fullWidth# ↦	Description and type Expand to fill 100% of the parent. Defaults to fullWidth prop of <EuiForm>. Type: boolean ↦	Default value false ↵
Prop isLoading# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop readOnly# ↦	Description and type Type: boolean ↦	Default value ↵
Prop min# ↦	Description and type Type: number ↦	Default value ↵
Prop max# ↦	Description and type Type: number ↦	Default value ↵
Prop step# ↦	Description and type Specifies the granularity that the value must adhere to. Accepts a number, e.g. 1 for integers, or 0.5 for decimal steps. Defaults to "any" for no stepping, which allows any decimal value(s). Type: number | "any" ↦	Default value "any" ↵
Prop inputRef# ↦	Description and type Type: Ref<HTMLInputElement> ↦	Default value ↵
Prop prepend# ↦	Description and type Creates an input group with element(s) coming before input. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop append# ↦	Description and type Creates an input group with element(s) coming after input. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop controlOnly# ↦	Description and type Completely removes form control layout wrapper and ignores icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. Type: boolean ↦	Default value ↵
Prop compressed# ↦	Description and type when true creates a shorter height input Type: boolean ↦	Default value false ↵

𐘂𐘂