Components · Form

NumericInput

A numeric field exposed as role spinbutton, with min/max clamping, up/down stepper buttons that disable at the bounds, and Arrow Up/Down keyboard support alongside typed entry.

Live in all three modes

Day · Night-NVG · Mono: one component, re-themed through the token layer.

Day
Night-NVG
Mono

Variants & states

  • min / max / step
  • stepper buttons
  • disabled

Tokens used

  • --semantic-color-surface-input
  • --semantic-color-border-default
  • --semantic-color-border-strong
  • --semantic-color-focus-ring

Copy-paste

import { NumericInput } from 'operator-components';

<NumericInput label="Altitude (m)" min={0} max={12000} step={50} defaultValue={500} />

Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)