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.

Usage

Labels

Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.

Version

Use the `major.minor` format. You can use wildcards `*` to span over multiple versions.

Do: Say what the field is in the label. Use help text for additional information.

Numeric version (e.g. `2.*`)

Don't: Put everything in the label. It's hard to scan.

Hint text

Place hints and instructions outside a text field so it is always visible to the user. Keep the hint text short, maximum two sentences long. Use hint text to:

Explain why you are asking a certain question: "We will only email you if there is a problem with your order."
Provide clarifying details on what to type: "Enter the full 32-character ID."
Tell the user where to find the information you're asking for: "Find the Elasticsearch cluster ID on the main administration page of your deployment."

Timeout

Use shorthand notation, such as 30s, 10m, or 1h.

Do: Help users make the right decision by clarifying what goes inside a field.

Name

This is the name that will be visible to other users.

Do: Use complete sentences and ending punctuation.

Placeholder text

In fields

Use the placeholder property to describe the expected value of the input or to provide a useful example.

Phone number

Include the international call prefix.

Do: Provide a simple example that highlights the expected syntax or value.

Endpoint

Include the port number.

Don't: Start with `for example`, or `e.g.`.

Add placeholder text in addition to field labels and help text, not as a replacement. Omit it if it doesn't add value for users. And keep it short.

Source

Enter a valid IP address.

Do: Place info essential to completing the form outside the field so that it is always visible.

Source

Enter CIDR or IP address. For example, `192.168.132.6/22`.

Don't: Use text that adds no value, such as “Type here”.

Do: When space is limited and the UI is very simple, you can use field labels as placeholder text. This must stay an exception.

Key

Value

Do: If space allows it, prefer following the rule described earlier with labels outside of the fields.

In search bars

In a search bar, be specific about what users can enter.

Do: Give users a hint at things they might want to search for. State the action the user performs (find, search) instead of the field functionality (jump to).

Don't: Use an ellipsis.

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`