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.

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.

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`