Number Field

A numeric input with increment/decrement stepper buttons, animated rolling digits, formatting, min/max/step clamping, and disabled/error states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Number Field to your project and fits it to your theme.

import { NumberField } from "@/components/ui/number-field";

export default function NumberFieldDemo() {
  return (
    <div className="flex items-center justify-center">
      <NumberField defaultValue={1} min={0} max={10} aria-label="Quantity" />
    </div>
  );
}