NumberBox

NumberBox combines a numeric input with Windows 98 spinner buttons.

Props

Prop	Type	Default	Description
`value` / `defaultValue`	`number`	`0`	Controlled or uncontrolled numeric value.
`onValueChange`	`(value: number) => void`	-	Called after a valid value is parsed or spinner changes.
`min` / `max`	`number`	safe integer limits	Allowed value range.
`step`	`number`	`1`	Spinner increment amount.
`label`	`ReactNode`	-	Optional associated label.
`labelPosition`	`'left' \| 'top'`	`'left'`	Label layout.

Examples

Controlled number input

Copies

Disabled

import { NumberBox } from '@murasaki/react98'
import { useState } from 'react'
 
export function NumberBoxBasicDemo(): React.ReactElement {
  const [quantity, setQuantity] = useState(3)
 
  return (
    <div className="flex flex-col gap-3">
      <NumberBox label="Copies" min={1} max={10} value={quantity} onValueChange={setQuantity} />
      <NumberBox label="Disabled" defaultValue={5} disabled />
    </div>
  )
}

ARIA

NumberBox renders a native input type="number"; spinner buttons are labelled Increment and Decrement.

Keyboard

The numeric input keeps native browser behavior, including typing, Tab focus movement, and ArrowUp/ArrowDown value changes where supported. The spinner buttons are pointer controls and are removed from the tab order.

SSR

Prefer defaultValue for uncontrolled usage or pass the same controlled value on server and client.