Skip to content
v2.5.0
English
Русский
Documentation

NumberField

NumberField is a compound component for numeric entry with optional stepper buttons, bounds, masking, and wheel or keyboard stepping.
StorybookSourceFigma

Labeling

  • Pair NumberFieldInput with a visible Label.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
↑Increases the value by one step, up to max. An empty field gets min, or 0 without it.
↓Decreases the value by one step, down to min.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.
  • Standard text editing still happens through the native input.

Focus Behavior

  • Focus lives on the input and any stepper buttons.
  • Ensure adjacent controls remain keyboard reachable in a sensible order.

Screen Reader Semantics

  • The meaningful input is still a native input.
  • aria-valuemin and aria-valuemax are exposed on the input from context.

Form Semantics

  • name, required, and submission behavior belong to NumberFieldInput.
  • Bounds and stepping are product behavior, not a replacement for backend validation.

Accessibility Risks

  • unlabeled numeric field
  • wheel-based changes surprising users when focus is on the field
  • unclear meaning of adjacent decrement/increment buttons