Number counter

#Example

<div class="flex flex-wrap items-center gap-4">
  <div class="input-counter" data-m-counter>
    <button type="button" class="input-counter-button" aria-label="Decrease">-</button>
    <input type="number" class="input" value="2" min="1" max="10" aria-label="Guests">
    <button type="button" class="input-counter-button" aria-label="Increase">+</button>
  </div>
  <div class="input-counter input-group-sm" data-m-counter>
    <button type="button" class="input-counter-button" aria-label="Decrease">-</button>
    <input type="number" class="input input-sm" value="0.5" min="0" max="5" step="0.25" aria-label="Weight in kilograms">
    <button type="button" class="input-counter-button" aria-label="Increase">+</button>
  </div>
</div>

#JavaScript API

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.input-counter {
  display: inline-flex;
  width: auto;
}

.input-group > :hover, .input-counter > :hover {
  z-index: 1;
}

.input-counter-button:hover {
  background-color: var(--surface-3);
}

.input-counter-button:disabled {
  cursor: not-allowed;
  opacity: var(--m-disabled-opacity);
}

.input-group > .input, .input-group > .select {
  flex: 1 1 0%;
  width: auto;
}

.input::-webkit-calendar-picker-indicator:hover {
  background: var(--foreground);
}

#Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Number counter: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-4">
  <div class="input-counter" data-m-counter>
    <button type="button" class="input-counter-button" aria-label="Decrease">-</button>
    <input type="number" class="input" value="2" min="1" max="10" aria-label="Guests">
    <button type="button" class="input-counter-button" aria-label="Increase">+</button>
  </div>
  <div class="input-counter input-group-sm" data-m-counter>
    <button type="button" class="input-counter-button" aria-label="Decrease">-</button>
    <input type="number" class="input input-sm" value="0.5" min="0" max="5" step="0.25" aria-label="Weight in kilograms">
    <button type="button" class="input-counter-button" aria-label="Increase">+</button>
  </div>
</div>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components