SayUI
← Library→ Turn this into a prompt
Input & controls

Number Input / Stepper

A numeric field with optional step buttons for precise counts and quantities.

Also known as stepper · quantity input · spinbutton

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Number Input / Stepper".

Build a quantity stepper: number input with +/− buttons, min 1 max 99, step 1, disabled minus at min, and keyboard support for arrow keys.

Anatomy:
- field: Editable number; respect min, max, step.
- step buttons: Optional +/− that change by step.

Preferred API / pattern: `custom stepper / input mode numeric`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Leading zeros and e notation surprises from type=number
  • ○Avoid: No max clamp
  • ○Avoid: Buttons not associated with the field for screen readers.

In plain wordsHow people search for it

“the quantity box with plus and minus buttons”“a number field I can type in or step up and down”“how I set '2 guests' or 'qty 3' in a form”

AnatomyOpen for part names

field
Editable number; respect min, max, step.
step buttons
Optional +/− that change by step.

How to write itOpen for stack patterns

Web (HTML/CSS)input type="number" / role="spinbutton"
React + Tailwind + shadcn/uicustom stepper / input mode numeric
SwiftUIStepper / TextField with number format
Ant Design<InputNumber>

Notes

Prefer steppers for small integers (quantity). Allow typing for speed. Clamp to min/max and explain errors. type=number still has quirks—validate on the server. Don't use a slider alone when exact integers matter.

Common mistakesHumans and models trip here

  • Leading zeros and e notation surprises from type=number: sanitize input.
  • No max clamp: users can enter impossible quantities.
  • Buttons not associated with the field for screen readers.

More failure symptoms on AI broke it.

Related patterns

SliderA track with a draggable thumb for choosing a value in a continuous range.Select / ComboboxA form control for choosing one (or more) options from a list.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X