Number Field
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.
new tab
<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
Step buttons allow the user to make small adjustments, quickly.
new tab
<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.
new tab
<vaadin-integer-field
label="Quantity"
helper-text="Max 10 items"
min="0"
max="10"
value="2"
step-buttons-visible
></vaadin-integer-field>
Step
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.
new tab
<vaadin-number-field
label="Duration (hours)"
step="0.5"
value="12.5"
step-buttons-visible
></vaadin-number-field>
Number Type Variants
Integer Field
To allow only integers to be entered, you can use the Integer Field like so:
new tab
<vaadin-integer-field label="X" value="-1284"></vaadin-integer-field>
<vaadin-integer-field label="Y" value="3910"></vaadin-integer-field>
BigDecimal Field
Java developers who need to support the BigDecimal type can use Big Decimal Field:
new tab
BigDecimalField bigDecimalField = new BigDecimalField();
bigDecimalField.setLabel("Result");
bigDecimalField.setWidth("240px");
bigDecimalField.setValue(new BigDecimal("948205817.472950487"));
add(bigDecimalField);
Best Practices
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.
69FAE707-4778-4093-8FB9-8BAE22E9D7F6