NumberInput

Carbon-spec number input. Adds increment/decrement buttons + numeric validation on top of TextInput. Step + min + max + precision wired to keyboard arrows.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗
patterns-numberinput--defaultOpen all variants →

When to use

  • Any numeric form field where the user benefits from up / down stepper buttons (quantity, port number, percentage).
  • Bounded numerics with min / max / step constraints.
  • Settings panels where keyboard arrows on a focused field should adjust the value.

When not to use

  • Plain text inputs that happen to contain digits (phone, ID) → use `TextInput`.
  • Range / slider input with two thumbs → use `Slider`.
  • Currency / formatted decimals → wrap NumberInput yourself; the kit doesn't ship a formatted-money primitive.
  • Time-of-day → not yet shipped; consider `TextInput` type="time".