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' hasControls value='1' min={1} />
  <NumberField label='Children' hasControls value='0' min={0} max={9} helperText='Age 2-12' />
  <NumberField label='Infants' hasControls 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)' hasControls step={0.5} value='12.5' />