"use client"; import { cn, clamp, stepValue, formatValue } from "@/lib/utils"; export interface NumberStepperProps { label?: string; value: number; onValueChange: (value: number) => void; min?: number; max?: number; step?: number; className?: string; disabled?: boolean; } export function NumberStepper({ label, value, onValueChange, min = 0, max = 100, step = 1, className, disabled = false, }: NumberStepperProps) { const adjust = (delta: number) => { if (disabled) return; const next = clamp(stepValue(value + delta, step), min, max); onValueChange(Number(formatValue(next, step))); }; return (

{label && ( {label} )}

{ const parsed = parseFloat(e.target.value); if (!isNaN(parsed)) { onValueChange(clamp(parsed, min, max)); } }} onKeyDown={(e) => { if (e.key === "ArrowUp") { e.preventDefault(); adjust(step); } else if (e.key === "ArrowDown") { e.preventDefault(); adjust(-step); } }} className="w-14 text-center font-mono text-[10px] font-medium bg-transparent focus:outline-none" style={{ color: "var(--mk-text-muted)", fontFamily: "var(--mk-font-mono)" }} />

); }

Prop	Type	Default	Description
value	number	—	Current value.
onValueChange	(value: number) => void	—	Change handler.
min	number	0	Minimum.
max	number	100	Maximum.
step	number	1	Step.
label	string	—	Field label.
className	string	—	Optional CSS class.

When to use

Demo

Props

Source

Dependencies

When to use

Demo

Props

Source

Dependencies