KasyKasy

Number Field

Live preview and documentation for the Number Field component.

About

A numeric field with +/− steppers instead of free typing — the value only changes via the buttons and is read-only. Inherits label, description, error, and focus outline from the kit's standard text field.

  • value / onChanged: controlled; onChanged receives the new int.
  • min / max: bound the steppers and dim the button once the limit is reached.
  • step: increment/decrement per tap (default 1).
  • label, hint, description, errorText, isInvalid, showRequiredIndicator: the same fields as a regular KasyTextField.
  • variant: reuses KasyTextFieldVariant (the same visual variants as the text field).
  • enabled: disables the whole field.
  • showFocusRing: when true (default), tapping +/− focuses the entire field and lights up the outline; false disables that outline.

Tapping either stepper focuses the whole field (not an isolated ring on the button), so the focus outline lights up around the entire field, just like clicking to type.

Preview

Loading the component…

Last updated on 11/03/2026

On this page