Input Number

A numeric input with native browser number validation. Native spinners are hidden by default. Supports min, max, and step constraints.

When to use

Use diwa-input-number for numeric values where a precise quantity is needed (quantities, ratings, weights). For free-form numeric entry like phone numbers or credit card numbers, prefer diwa-input-tel or diwa-input-text with inputmode="numeric" to avoid native spinner UX.

Example

<!-- Integer quantity -->
<diwa-input-number
  label="Quantity"
  min="1"
  max="99"
  step="1"
  value="1"
></diwa-input-number>

<!-- Decimal step -->
<diwa-input-number
  label="Rating"
  min="0"
  max="5"
  step="0.5"
></diwa-input-number>

min / max / step

min and max enforce the range at the browser level and are reflected in constraint validation. step controls the increment for the native spin buttons (spinner arrows are hidden via CSS in dense mode (compact), but keyboard increment still applies).

Use a decimal step such as 0.01 when the field accepts fractional values like currency or measurements.

Native spinner

The component hides the browser-native spinner arrows via -webkit-appearance: none to keep the appearance consistent. Users can still adjust the value with the arrow keys.