Number Input

Forms

About

A text input for numeric values with decrement/increment buttons, min/max/step clamping, and keyboard spinbutton support (arrow keys, Page Up/Down, Home/End).

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

Code

How Number Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import NumberInput from "@/components/ui/number-input";
import { useState } from "react";

export default function NumberInputDemo() {
  const [guests, setGuests] = useState<number | null>(2);

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <label htmlFor="guests" className="text-sm font-medium">
        Guests
      </label>
      <NumberInput
        id="guests"
        value={guests}
        onValueChange={setGuests}
        min={1}
        max={12}
        step={1}
      />
      <p className="text-muted-foreground text-xs">
        Arrow keys step by 1, Page Up / Page Down by 10, Home and End jump to 1
        and 12.
      </p>
    </div>
  );
}