Number Input

Installation

$ npx shadcn@latest add https://goodui.dev/r/number-input.json

The file lands in components/goodui/number-input.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/number-input works too.

Usage

import * as React from "react"
import { NumberInput } from "@/components/goodui/number-input"

export function SeatsField() {
  const [seats, setSeats] = React.useState<number | null>(5)
  const [discount, setDiscount] = React.useState<number | null>(0.1)

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <NumberInput label="Seats" value={seats} onValueChange={setSeats} min={1} max={250} steppers="split" name="seats" />
      <NumberInput
        label="Discount"
        value={discount}
        onValueChange={setDiscount}
        min={0}
        max={0.5}
        step={0.05}
        format={{ style: "percent" }}
        description="Applied to every seat."
      />
    </div>
  )
}

When to use

Examples

<NumberInput
  label="Deposit"
  locale="de-DE"
  format={{ style: "currency", currency: "EUR" }}
  min={0}
  step={50}
  largeStep={500}
  defaultValue={1250}
/>

<NumberInput label="Guests per table" min={1} max={8} clampOnBlur={false} message="Tables seat up to 8 guests." trailing="guests" />

<NumberInput label="Session length" min={15} max={240} step={15} defaultValue={45} steppers="stacked"
  format={{ style: "unit", unit: "minute", unitDisplay: "long" }} />

API reference

Accessibility

• •The field is an <input> with role="spinbutton", aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext set to the formatted value ("$1,250.00").
• •The − and + buttons are out of the tab order (keyboard users have the arrow keys), carry translatable aria-labels and aria-controls pointing at the field, and still step once when activated without a pointer.
• •label renders a real <label htmlFor>; without one, pass aria-label. description and message are linked with aria-describedby, and the message region is aria-live.
• •invalid (or an out-of-range value with clampOnBlur={false}) sets aria-invalid and the danger color.
• •name renders a hidden input with the raw number, so native forms submit 1250, not "1.250,00 €".

Motion

• •Focus: ring (3px tone ring, 200 ms), glow (soft tone halo, 300 ms) or lift (rises 2px). none is static.
• •Step: slide moves the value 7px in the step direction and fades it in over 170 ms; pop scales it to 1.09 and back over 220 ms. Both use the Web Animations API on the input, so React does not re-render for them.
• •Reduced motion: transitions and the step animation are skipped (checked with matchMedia at step time).

• •Press-and-hold runs one setTimeout chain (first repeat after 400 ms, then from about 126 ms down to 28 ms between steps) and stops on pointerup, pointercancel, window blur, reaching a bound or unmount.
• •Intl.NumberFormat instances are memoized on locale and the format object; pass a stable format object (a constant or useMemo) to avoid rebuilding them on every render.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related