Number input

The demo above, as code.

'use client';

import * as React from 'react';
import { NumberInput } from './number-input';

const USD: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };

export default function NumberInputDemo({ replay = 0 }: { replay?: number }) {
  const [seats, setSeats] = React.useState<number | null>(2);

  React.useEffect(() => {
    if (replay === 0) return;
    setSeats(2);
    const timers = [1, 2, 3].map((press) => window.setTimeout(() => setSeats(2 + press), 300 * press));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <NumberInput
        label="Seats"
        min={1}
        max={50}
        value={seats}
        onValueChange={setSeats}
        hint="Enter a whole number."
      />
      <NumberInput
        label="Budget"
        layout="vertical"
        format={USD}
        locales="en-US"
        step={100}
        defaultValue={1200}
      />
    </div>
  );
}

Parts: field (label row, help icon, hint from input), group (border box), decrement button (minus, or the lower stepper half), text input (the number), increment button (plus, or the upper stepper half).

Every row names a token from the Motion page. The last column says what happens when the user asks for reduced motion.

• Built on a number field primitive: the text input has role textbox with inputmode decimal (or numeric for whole numbers) and aria-roledescription "Number field"; it is not type number, so formats and locales work.
• Keyboard: Up and Down step by step, Page Up and Page Down (or Shift with an arrow) by largeStep, Home and End go to min and max when they are set.
• The step buttons are named "Increase" and "Decrease" and are not tab stops (tabindex -1), because the arrow keys in the input do the same; the input is the one tab stop.
• Holding a step button repeats the step (the primitive's press-and-hold); the value is announced when the user stops, not on every repeat.
• Step buttons are at least 28 x 22px in the vertical stepper; a transparent hit area grows each to 24px high (WCAG 2.5.8).
• The label, hint and invalid state are linked as in Input.
• Reduced motion: colors swap at once and the step buttons do not scale. The value never animates, with or without reduced motion.