Stepper input
A labeled native number field with bounded decrement and increment actions and an editable empty state.
Print reference sheets
Estimated total: $18
Implementation
1"use client";2 3import { useId, useRef, useState, type InputHTMLAttributes } from "react";4import { Minus, Plus } from "lucide-react";5 6export type StepperInputProps = Omit<7 InputHTMLAttributes<HTMLInputElement>,8 | "type"9 | "value"10 | "defaultValue"11 | "onChange"12 | "min"13 | "max"14 | "step"15 | "children"16> & {17 label: string;18 description?: string;19 error?: string;20 value?: number | "";21 defaultValue?: number | "";22 min?: number;23 max?: number;24 step?: number;25 onChange?: (value: number | "") => void;26};27 28/** Exact numeric entry with native stepping, validation and form values. */