Input

Numeric stepper

Bounded numeric entry using the native number input and explicit constraints.

Canonical sourcepatterns/numeric-stepper.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Target deployments per week Enter a whole number from 0 through 50.

View HTML

<label class="ef-numeric-stepper">
  <span class="ef-numeric-stepper__label">Target deployments per week</span>
  <input type="number" name="ex1-numeric-stepper-deployments-per-week" min="0" max="50" step="1" inputmode="numeric" required>
  <span class="ef-field__description">Enter a whole number from 0 through 50.</span>
</label>

Example 2

Representative state

A browser-native state made visible without adding a runtime.

Target deployments per week Enter a whole number from 0 through 50.

View HTML

<label class="ef-numeric-stepper">
  <span class="ef-numeric-stepper__label">Target deployments per week</span>
  <input type="number" name="ex2-numeric-stepper-deployments-per-week" min="0" max="50" step="1" inputmode="numeric" required value="3">
  <span class="ef-field__description">Enter a whole number from 0 through 50.</span>
</label>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Target deployments per week Enter a whole number from 0 through 50.

View HTML

<label class="ef-numeric-stepper">
  <span class="ef-numeric-stepper__label">Target deployments per week</span>
  <input type="number" name="ex3-numeric-stepper-deployments-per-week" min="0" max="50" step="1" inputmode="numeric" required>
  <span class="ef-field__description">Enter a whole number from 0 through 50.</span>
</label>