Number Field
Number Field sports many of the same features as Text Field, but only accepts numeric input. You can specify a unit as a prefix or suffix for the field.
<HorizontalLayout theme="spacing">
<NumberField label="Balance" value="200">
<div slot="prefix">$</div>
</NumberField>
<NumberField label="Balance" value="200">
<div slot="suffix">€</div>
</NumberField>
</HorizontalLayout>
Stepper Controls
Stepper controls allow the user to quickly make small adjustments.
<HorizontalLayout theme="spacing">
<NumberField label="Adults" stepButtonsVisible value="1" min={1} />
<NumberField
label="Children"
stepButtonsVisible
value="0"
min={0}
max={9}
helperText="Age 2-12"
/>
<NumberField label="Infants" stepButtonsVisible value="0" min={0} max={9} />
</HorizontalLayout>
Step
The step value of a Number Field defines the allowed numeric 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 the value entered doesn’t align with the specified step.
<NumberField label="Duration (hours)" stepButtonsVisible step={0.5} value="12.5" />
Important
| You can find more information in the corresponding article on vaadin.com. |