Number input (UI SDK): Mouse wheel

With wheel, scrolling over the focused field steps the value. It’s off by default, so a page that scrolls past the field never changes it.

Hover delay

Focus it, then scroll over it.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputWheel() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="hover-delay">Hover delay</Label>
      <NumberInput
        defaultValue={300}
        min={0}
        max={2000}
        step={50}
        wheel
        format={{ style: "unit", unit: "millisecond" }}
        locale="en-US"
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="hover-delay" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Focus it, then scroll over it.
      </p>
    </div>
  )
}

export { UiSdkNumberInputWheel }

Add this example

This adds the example as components/examples/ui-sdk-number-input/wheel.tsx, together with the Number input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input-wheel.json

To add only the component, follow the Number input installation.

Props in this example

The Number input props this example sets, from the API reference.

NumberInput

Prop	Type	Default
`defaultValue`	`number \| null`	`–`
`min`	`number`	`–`
`max`	`number`	`–`
`step`	`number`	`1`
`format`	`Intl.NumberFormatOptions`	`–`
`locale`Defaults to the page’s language.	`string`	`–`
`wheel`	`boolean`	`false`

NumberInputControl

Prop	Type	Default
`id`	`string`	`–`

Every prop is in the Number input API reference.

More Number input examples

See them all, with keyboard support and accessibility notes, on the Number input page.