Number Input

A number field with increment/decrement steppers, clamping, and keyboard/scroll support.

Quantity

<div
  data-controller="zag-number-input"
  data-part="root"
  data-zag-number-input-value-value="1"
  data-zag-number-input-min-value="0"
  data-zag-number-input-max-value="99"
  class="space-y-1"
>
  <label data-part="label" class="mr-2 text-sm font-medium">Quantity</label>
  <div
    data-part="control"
    class="border-input inline-flex items-center overflow-hidden rounded-lg border"
  >
    <button
      data-part="decrement-trigger"
      class="text-muted-foreground border-input hover:bg-accent border-r px-3 py-2 text-lg"
      aria-label="Decrease"
    >
      −
    </button>
    <input
      data-part="input"
      class="border-input bg-popover w-16 py-2 text-center focus:outline-none"
    />
    <button
      data-part="increment-trigger"
      class="text-muted-foreground border-input hover:bg-accent border-l px-3 py-2 text-lg"
      aria-label="Increase"
    >
      +
    </button>
  </div>
</div>

Parts

root, label, control, input, value-text, increment-trigger, decrement-trigger, scrubber.

Values

Attribute	Type	Default	Description
data-zag-number-input-value-value	Number	0	Initial value.
data-zag-number-input-min-value	Number	(−∞)	Minimum value.
data-zag-number-input-max-value	Number	(+∞)	Maximum value.
data-zag-number-input-step-value	Number	1	Step increment.
data-zag-number-input-name-value	String	""	name for form submission.
data-zag-number-input-allow-mouse-wheel-value	Boolean	false	Change value on scroll.
data-zag-number-input-clamp-value-on-blur-value	Boolean	true	Clamp to min/max on blur.
data-zag-number-input-disabled-value	Boolean	false	Disable the input.
data-zag-number-input-required-value	Boolean	false	Mark the field required.
data-zag-number-input-invalid-value	Boolean	false	Mark the field invalid.
data-zag-number-input-read-only-value	Boolean	false	Read-only.

Events

Emits zag-number-input:change — detail is { value, valueAsNumber }.

Programmatic control

value (getter), valueAsString (getter), setValue(n), increment(), decrement().