Number Input

1import { Field, NumberInput } from '@/ui/Input'23<Field label="Replicas" description="Between 1 and 12.">4  <NumberInput5    value={replicas}6    onValueChange={setReplicas}7    min={1}8    max={12}9    step={1}10    suffix="pods"11  />12</Field>1314// type="number" is a trap: it accepts 'e', '+' and '-', returns '' for15// anything it dislikes — so you cannot tell empty from garbage — and steps16// on scroll. This is the version that behaves.17function NumberField({ value, onValueChange, min, max, step = 1 }) {18  const [draft, setDraft] = React.useState(String(value ?? ''))1920  return (21    <input22      type="text"23      inputMode="decimal"24      role="spinbutton"25      aria-valuenow={value}26      aria-valuemin={min}27      aria-valuemax={max}28      value={draft}29      onChange={(e) => setDraft(e.target.value)}   // no clamping here30      // Clamp on blur. Typing "25" into a max-12 field must pass through "2".31      onBlur={() => {32        const n = Number(draft)33        if (Number.isNaN(n)) return setDraft(String(value ?? ''))34        const clamped = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n))35        onValueChange(clamped)36        setDraft(String(clamped))37        if (clamped !== n) announce(`Adjusted to ${clamped}`)38      }}39      // A page scroll must never change a focused value.40      onWheel={(e) => e.currentTarget.blur()}41      onKeyDown={(e) => {42        if (e.key === 'ArrowUp')   { e.preventDefault(); nudge(+step) }43        if (e.key === 'ArrowDown') { e.preventDefault(); nudge(-step) }44        if (e.key === 'PageUp')    { e.preventDefault(); nudge(+step * 10) }45        if (e.key === 'PageDown')  { e.preventDefault(); nudge(-step * 10) }46      }}47    />48  )49}

<div class="ds-field">
  <label for="replicas">Replicas</label>
  <p id="replicas-desc">Between 1 and 12.</p>

  <div class="ds-number">
    <input
      id="replicas"
      type="text"
      inputmode="decimal"
      role="spinbutton"
      aria-valuenow="3"
      aria-valuemin="1"
      aria-valuemax="12"
      aria-valuetext="3 pods"
      aria-describedby="replicas-desc"
      value="3"
    />
    <span class="ds-number__unit" aria-hidden="true">pods</span>

    <span class="ds-number__steppers">
      <!-- Disabled at the bound, never removed: it is the only signal
           that a limit exists. -->
      <button type="button" aria-label="Increase replicas">▲</button>
      <button type="button" aria-label="Decrease replicas" disabled>▼</button>
    </span>
  </div>
</div>

.ds-number {
  display: inline-flex;
  align-items: center;
  inline-size: 7rem;                 /* width hints at magnitude */
  block-size: 36px;
  padding-inline: 12px 8px;          /* reduced on the stepper side */
  border: 1px solid var(--ds-border-interactive);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
}

.ds-number input {
  inline-size: 100%;
  text-align: end;                   /* a column of numbers lines up */
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
}

/* Kill the native spinners: we draw our own so they can be sized as targets
   and disabled at the bounds. */
.ds-number input::-webkit-outer-spin-button,
.ds-number input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.ds-number input[type='number'] { -moz-appearance: textfield; }

.ds-number__steppers {
  display: grid;
  grid-template-rows: 1fr 1fr;
  inline-size: 20px;
  margin-inline-start: 6px;
}
.ds-number__steppers button { block-size: 16px; color: var(--ds-fg-muted); }
.ds-number__steppers button:disabled { color: var(--ds-fg-disabled); }

@media (pointer: coarse) {
  .ds-number__steppers { inline-size: 44px; }
  .ds-number__steppers button { block-size: 22px; }
}