Skip to content
HyperUI

No results found.

Back to application components

Quantity Inputs

Quantity input components for number inputs, ideal for ecommerce, order forms, and shopping carts.

4/4 Dark Mode Updated: N/ANo commit information available.

Base with plus and minus buttons

markmead

<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>

Plugins: @tailwindcss/forms

Base with plus and minus buttons (Dark)

markmead

<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 dark:text-gray-300"
    >
      &minus;
    </button>

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

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

Plugins: @tailwindcss/forms

Base with plus and minus buttons, no spinners in the input

markmead

<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 [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Base with plus and minus buttons, no spinners in the input (Dark)

markmead

<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 dark:text-gray-300"
    >
      &minus;
    </button>

    <input
      type="number"
      id="Quantity"
      value="1"
      class="h-10 w-24 rounded-sm border-gray-200 [-moz-appearance:textfield] sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Base with plus and minus buttons, no spinners in the input and text centered

markmead

<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-16 rounded-sm border-gray-200 text-center [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Base with plus and minus buttons, no spinners in the input and text centered (Dark)

markmead

<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 dark:text-gray-300"
    >
      &minus;
    </button>

    <input
      type="number"
      id="Quantity"
      value="1"
      class="h-10 w-16 rounded-sm border-gray-200 text-center [-moz-appearance:textfield] sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Bordered with plus and minus buttons

markmead

<div>
  <label for="Quantity" class="sr-only"> Quantity </label>

  <div class="flex items-center rounded-sm border border-gray-200">
    <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-16 border-transparent text-center [-moz-appearance:textfield] sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Bordered with plus and minus buttons (Dark)

markmead

<div>
  <label for="Quantity" class="sr-only"> Quantity </label>

  <div class="flex items-center rounded-sm border border-gray-200 dark:border-gray-800">
    <button
      type="button"
      class="size-10 leading-10 text-gray-600 transition hover:opacity-75 dark:text-gray-300"
    >
      &minus;
    </button>

    <input
      type="number"
      id="Quantity"
      value="1"
      class="h-10 w-16 border-transparent text-center [-moz-appearance:textfield] sm:text-sm dark:bg-gray-900 dark:text-white [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none"
    />

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

Plugins: @tailwindcss/forms

Related components

View all application components