devsnips
Search docs, APIs, guides…

Component

Number Stepper Input

Input fields with increment/decrement buttons for quantity selection

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/number-stepper/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/number-stepper
registry path: Tailwind/Components/Input/number-stepper

Source

Implementation

code.html 
<!-- Number Stepper - Default -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
  <div class="inline-flex items-center border border-gray-300 rounded-lg">
    <button class="px-4 py-2.5 text-gray-600 hover:bg-gray-100 hover:text-gray-900 border-r border-gray-300 rounded-l-lg transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
      </svg>
    </button>
    <input type="number" value="1" class="w-16 px-2 py-2.5 text-center border-0 focus:outline-none focus:ring-0" />
    <button class="px-4 py-2.5 text-gray-600 hover:bg-gray-100 hover:text-gray-900 border-l border-gray-300 rounded-r-lg transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
  </div>
</div>

<!-- Number Stepper - Compact -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Items</label>
  <div class="inline-flex items-center border border-gray-200 rounded-lg bg-gray-50">
    <button class="p-2 text-gray-500 hover:bg-gray-200 rounded-l-lg transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
      </svg>
    </button>
    <input type="number" value="5" class="w-12 px-1 py-1.5 text-center text-sm bg-transparent border-0 focus:outline-none" />
    <button class="p-2 text-gray-500 hover:bg-gray-200 rounded-r-lg transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
  </div>
</div>

<!-- Number Stepper - Pill -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Guests</label>
  <div class="inline-flex items-center bg-white border-2 border-gray-200 rounded-full">
    <button class="p-3 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
      </svg>
    </button>
    <input type="number" value="4" class="w-12 px-1 py-2 text-center font-semibold text-gray-900 bg-transparent border-0 focus:outline-none" />
    <button class="p-3 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
  </div>
</div>

<!-- Number Stepper - With Limits -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Tickets (max 10)</label>
  <div class="inline-flex items-center border-2 border-blue-200 rounded-xl bg-blue-50">
    <button class="p-3 text-blue-500 hover:bg-blue-100 rounded-l-xl transition-colors" disabled>
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
      </svg>
    </button>
    <input type="number" value="1" min="1" max="10" class="w-14 px-2 py-2.5 text-center font-semibold text-blue-700 bg-transparent border-0 focus:outline-none" />
    <button class="p-3 text-blue-500 hover:bg-blue-100 rounded-r-xl transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
  </div>
</div>
71 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/number-stepper
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/number-stepper/

Install: npx devsnips add
Tailwind/Components/Input/number-stepper

This is the Number Stepper Input — Input fields with increment/decrement buttons for quantity selection

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/number-stepper