Number Field has many of the same features as Text Field, but it accepts only numeric input.
The input can be a decimal, an integer or a big decimal.
You can specify a unit as a prefix, or a suffix for the field.
<vaadin-number-field label="Balance" value="200"> <div slot="prefix">$</div> </vaadin-number-field> <vaadin-number-field label="Balance" value="200"> <div slot="suffix">€</div> </vaadin-number-field>
Step buttons allow the user to make small adjustments, quickly.
<vaadin-integer-field value="2" step-buttons-visible min="0" max="9" ></vaadin-integer-field>
Minimum and Maximum Value
The valid input range of a Number Field is set by defining the minimum and maximum values.
You can set the helper text to give information about the range.
<vaadin-integer-field label="Quantity" helper-text="Max 10 items" min="0" max="10" value="2" step-buttons-visible ></vaadin-integer-field>
The step value of a Number Field defines the numeric intervals that are allowed.
It specifies the amount by which the value increases or decreases when using the Up or Down arrow keys, or the step buttons.
It also invalidates the field if the value entered doesn’t align with the specified step.
<vaadin-number-field label="Duration (hours)" step="0.5" value="12.5" step-buttons-visible ></vaadin-number-field>
Number Type Variants
To allow only integers to be entered, you can use the Integer Field like so:
<vaadin-integer-field label="X" value="-1284"></vaadin-integer-field> <vaadin-integer-field label="Y" value="3910"></vaadin-integer-field>
Java developers who need to support the BigDecimal type can use Big Decimal Field:
BigDecimalField bigDecimalField = new BigDecimalField(); bigDecimalField.setLabel("Result"); bigDecimalField.setWidth("240px"); bigDecimalField.setValue(new BigDecimal("948205817.472950487")); add(bigDecimalField);
The following features common to most input field components are supported:
The label is used to identify the input field. It supports plain-text content, and its length is limited to the width of the field. Helpers and Tooltips can be used to provide additional information that doesn’t fit into the label.
Visible labels are strongly recommended for all input fields. In cases where the built-in label cannot be used, an external element can be associated as the field’s label through the
aria-labelledby attribute. Fields without any visible label should be provided an invisible label for assistive technologies through the
Helpers are used to provide additional information that the user may need to fill in the field, such as format requirements or explanations of the field’s purpose, below the field.
A style variant is available for rendering the helper above the field.
In addition to plain-text, helpers can contain components and other HTML elements. However, complex and interactive content are likely to have accessibility issues.
The placeholder is a text that is displayed when the field is empty. Its primary purpose is to provide a short input hint, such as the expected format, in cases where a Helper cannot be used.
Placeholders should not be used as a replacement for a visible label. See Label for alternatives to the built-in field label. Be aware that placeholders can be mistaken for a filled-in value.
Tooltips are small text pop-ups displayed on hover and on keyboard-focus. They can be used to provide additional information about a field. This can be useful in situations where an always-visible Helper is not appropriate. Helpers are generally recommended in favor of tooltips, as they provide much better discoverability and mobile support. See the Tooltip documentation for more information.
Prefix & Suffix
Prefix and suffix elements — rendered at either end of the field — can be used to display units, icons, and similar visual cues to the field’s purpose or format.
<vaadin-number-field label="Label" helper-text="Helper text" placeholder="Placeholder" clear-button-visible> <vaadin-tooltip slot="tooltip" text="Tooltip text"></vaadin-tooltip> <span slot="prefix">$</span> <vaadin-icon slot="suffix" icon="vaadin:dollar"></vaadin-icon> </vaadin-number-field>
Read-Only & Disabled
Fields used to display values should be set to read-only mode to prevent editing. Read-only fields are focusable and visible to screen readers. They can display tooltips. Their values can be selected and copied.
Fields that are currently unavailable should be disabled. The reduced contrast of disabled fields makes them inappropriate for displaying information. They can’t be focused or display tooltips. They’re invisible to screen readers, and their values cannot be selected and copied.
Disabled fields can be useful in situations where they can become enabled based on some user action. Consider hiding fields entirely if there is nothing the user can do to make them editable.
<vaadin-number-field readonly label="Read-only" value="200"> </vaadin-number-field> <vaadin-number-field disabled label="Disabled"> </vaadin-number-field>
The following style variants can be applied:
Three different text alignments are supported: left (default), center, and right.
Right-alignment is recommended for numerical values when presented in vertical groups, as it aids interpretation and comparison of values.
The small variant can be used to make individual fields more compact. The default size of fields can be customized through style properties.
Helper Above Field
The helper can be rendered above the field, below the label.
<vaadin-number-field theme="align-right small helper-above-field" label="Label" helper-text="Helper text" value="123.45"> </vaadin-number-field>
Number Field should be used for actual number values, such as counts and measures — values that may be part of a calculation. Don’t use it for other digit-based values, such as telephone, credit card, and social security numbers. These values can have leading zeros and be greater than Number Field’s maximum supported value.
When applicable, set the most common choice as the default value. For example, airline, bus, train and other travel companies typically set the default number of passengers to 1.