NumberInput

forms

Numeric stepper with increment/decrement buttons, native number input, min/max clamping, label, disabled state, and focus ring. Hides native spin buttons for consistent styling.

Import

typescript
import { NumberInput } from "packages/ui/src";

Props

NumberInputProps

PropTypeRequired
valuenumberNo
minnumberNo
maxnumberNo
stepnumberNo
onChange(value) => void, label?: string, disabled?: booleanNo

Examples

NumberInput Component

Numeric stepper with +/- buttons, min/max clamping, label, and disabled state. 45th component.

Quantity (1-99)

Age (step 5)

Items per page

Disabled

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionNumeric stepper with increment/decrement buttons, native number input, min/max clamping, label, disabled state, and focus ring. Hides native spin buttons for consistent styling.
PropsNumberInputProps (value?: number, min?: number, max?: number, step?: number, onChange?: (value) => void, label?: string, disabled?: boolean)
Statesdefault, at-min, at-max, disabled, focused, with-label
A11y
  • Decrease button with aria-label
  • Increase button with aria-label
  • Input has aria-label from label prop
  • Buttons disabled at min/max bounds
Responsive
  • Flexible width
  • Buttons fixed width
Motion
  • Border and shadow transition on focus
  • Button hover color transition
Token Dependencies
  • components.numberInput.background
  • components.numberInput.borderColor
  • components.numberInput.borderRadius
  • components.numberInput.padding
  • components.numberInput.fontSize
  • components.numberInput.textColor
  • components.numberInput.labelColor
  • components.numberInput.labelFontSize
  • components.numberInput.buttonColor
  • components.numberInput.buttonHoverColor
  • components.numberInput.buttonHoverBackground
  • components.numberInput.focusBorderColor
  • components.numberInput.focusRing
  • components.numberInput.disabledOpacity
Content Slotslabel (string)
CMS Bindings
  • Min/max from CMS config
  • Label from CMS schema
Test Cases
  • Renders number input
  • Shows label text
  • Shows current value
  • Increment button increases value
  • Decrement button decreases value
  • Clamps to min
  • Clamps to max
  • Passes className through