Number Field
Number Field sports many of the same features as Text Field but only accepts numeric input.
The input can be decimal, integral or big decimal.
You can specify a unit as a prefix or suffix for the field.
new tab
NumberField dollarField = new NumberField();
dollarField.setLabel("Balance");
dollarField.setValue(200.0);
Div dollarPrefix = new Div();
dollarPrefix.setText("$");
dollarField.setPrefixComponent(dollarPrefix);
NumberField euroField = new NumberField();
euroField.setLabel("Balance");
euroField.setValue(200.0);
Div euroSuffix = new Div();
euroSuffix.setText("€");
euroField.setSuffixComponent(euroSuffix);
add(dollarField, euroField);
Stepper Controls
Stepper controls allow the user to quickly make small adjustments.
new tab
IntegerField adultsField = new IntegerField();
adultsField.setValue(2);
adultsField.setHasControls(true);
adultsField.setMin(0);
adultsField.setMax(9);
Minimum & Maximum Value
The valid input range of a Number Field can be set by defining minimum and maximum values.
You can set the Helper text to instruct about the range.
new tab
IntegerField integerField = new IntegerField();
integerField.setLabel("Quantity");
integerField.setHelperText("Max 10 items");
integerField.setMin(0);
integerField.setMax(10);
integerField.setValue(2);
integerField.setHasControls(true);
add(integerField);
Step
The step value of a Number Field defines the allowed number intervals.
It specifies the amount by which the value increases/decreases when using the Up/Down arrow keys or the stepper controls.
It also invalidates the field if an entered value does not align with the specified step.
new tab
NumberField numberField = new NumberField();
numberField.setLabel("Duration (hours)");
numberField.setStep(0.5);
numberField.setValue(12.5);
numberField.setHasControls(true);
add(numberField);
Number Type Variants
Integer Field
To only allow entering integer numbers, you can use the Integer Field:
new tab
IntegerField xField = new IntegerField();
xField.setLabel("X");
xField.setValue(-1284);
IntegerField yField = new IntegerField();
yField.setLabel("Y");
yField.setValue(3910);
add(xField, yField);
BigDecimal Field
Java developers that 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. Do not 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 default the number of passengers to 1.
5CF5DB80-A237-424D-9276-C7B79614997B