Number Field

A numeric input with increment and decrement steppers — and pointer scrubbing from Base UI. The steppers press with seam depth.

tsx

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/registry/seam/ui/number-field"

export default function NumberFieldDemo() {
  return (
    <NumberField defaultValue={1} min={0} max={10}>
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput aria-label="Quantity" />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
  )
}

bunx --bun @seamui/cli@latest add number-field

Notes

Base UI enables click-and-drag scrubbing on the input — drag horizontally to change the value without the steppers.
A labelled spinbutton with extended keyboard stepping: arrows plus Page Up/Down for larger jumps and Home/End for min/max.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.