Vibedex.io
Back to gallery
formsBeginner

Quantity Selector

A −/+ stepper input for numeric quantity selection.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a quantity stepper with Tailwind: a minus button on the left, a numeric input in the middle (no spin buttons), and a plus button on the right. All three share borders to look like one control. Hover lightens the buttons; the input is text-centered.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/quantity-inputs/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-quantity
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex justify-center p-6 w-full">
<div>
      <label for="Quantity" class="sr-only"> Quantity </label>

      <div class="flex items-center gap-1">
        <button type="button" class="size-10 leading-10 text-gray-600 transition hover:opacity-75">
          &minus;
        </button>

        <input
          type="number"
          id="Quantity"
          value="1"
          class="h-10 w-24 rounded-sm border-gray-200 sm:text-sm"
        />

        <button type="button" class="size-10 leading-10 text-gray-600 transition hover:opacity-75">
          &plus;
        </button>
      </div>
    </div>
  </div>
</div>