Docs

Docs

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>

Common Input Field Features

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

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.