Skip to main content

Number Input

Number field with optional +/- stepper buttons, min/max clamping, and field shell.

Compact with steppers

Use stepper buttons or type a number.

Inline pair

Use stepper buttons or type a number.
Use stepper buttons or type a number.

Without steppers

Plain number field when steppers are not needed.

Step size & bounds

Use stepper buttons or type a number.

Table seats — even numbers only, 2 to 20.

Error

Use stepper buttons or type a number.

Disabled & read-only

Use stepper buttons or type a number.
Use stepper buttons or type a number.

Animation variants

animationVariant — click each control to compare press feedback.

Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
showSteppersOptionalbooleantrueShows increment/decrement buttons.
stepOptionalnumber1Stepper increment amount.
min / maxOptionalnumberValue bounds; steppers clamp to range.
label / hint / errorOptionalstringField shell props.
animationVariantOptionalPressAnimationVariantdefaultPress animation — default, none, ripple, scale, sink, lift, pulse, or glow.