Input number

Numeric field with KtUI lifecycle on the native input[type=number], optional decrement/increment buttons, and custom events. Not the wizard Stepper—see Stepper for multi-step flows.

Basic

<div class="w-full max-w-xs" data-mv-input-number="true">
  <input
    type="number"
    class="mv-input w-full tabular-nums"
    min="0"
    max="99"
    step="1"
    value="1"
  />
</div>

Min, max, and step

Use native min, max, and step on the number input. Optional + / − controls use the browser’s stepUp() / stepDown() so behavior matches native constraints.

Quantity (step 5, max 50)

Native min, max, and step apply to typing and spinners.

<div class="w-full max-w-xs space-y-2" data-mv-input-number="true">
  <label for="mv-in-demo-step" class="text-sm text-muted-foreground">Quantity (step 5, max 50)</label><input id="mv-in-demo-step" type="number" class="mv-input w-full tabular-nums" min="0" max="50" step="5" value="10">
  <p class="text-xs text-muted-foreground">
    Native <code class="text-foreground/80">min</code>,<!-- -->
    <code class="text-foreground/80">max</code>, and<!-- -->
    <code class="text-foreground/80">step</code> apply to typing and spinners.
  </p>
</div>

With buttons

Pair data-mv-input-number-decrement and data-mv-input-number-increment with accessible names (aria-label or visible text) on the buttons.

<div class="mv-input-group w-full max-w-xs" data-mv-input-number="true">
  <button type="button" class="mv-btn mv-btn-outline shrink-0 px-3" data-mv-input-number-decrement="true" aria-label="Decrease quantity">
    −</button><input type="number" class="mv-input min-w-0 tabular-nums text-center" min="0" max="10" step="1" aria-label="Quantity" value="5"><button type="button" class="mv-btn mv-btn-outline shrink-0 px-3" data-mv-input-number-increment="true" aria-label="Increase quantity">
    +
  </button>
</div>

Disabled

Use the native disabled attribute on the input. Decrement/increment handlers no-op while disabled.

Native disabled — increment/decrement hooks are ignored.

<div class="w-full max-w-xs space-y-2" data-mv-input-number="true">
  <input type="number" class="mv-input w-full opacity-80 tabular-nums" min="0" max="10" disabled value="3">
  <p class="text-xs text-muted-foreground">
    Native <code class="text-foreground/80">disabled</code> —
    increment/decrement hooks are ignored.
  </p>
</div>