Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Number Field

Source: TypeScript / Java

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.

Open in a
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>

Common Input Field Features

Number Field includes all Text Field and shared input field features.

Step Buttons

Step buttons allow the user to make small adjustments, quickly.

Open in a
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.

Open in a
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.

Open in a
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:

Open in a
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:

Open in a
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