Number input (UI SDK): Scrub

Drag a NumberInputScrubArea sideways to change the value, like in a design tool. Where the browser allows pointer lock, the drag can go past the edge of the screen, and NumberInputScrubAreaCursor draws the cursor.

Frame

import {
  NumberInput,
  NumberInputControl,
  NumberInputGroup,
  NumberInputScrubArea,
  NumberInputScrubAreaCursor,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  { label: "X position", handle: "X", defaultValue: 120 },
  { label: "Y position", handle: "Y", defaultValue: 48 },
  { label: "Width", handle: "W", defaultValue: 320, min: 0 },
  { label: "Height", handle: "H", defaultValue: 240, min: 0 },
]

function UiSdkNumberInputScrub() {
  return (
    <div
      role="group"
      aria-labelledby="scrub-frame"
      className="flex w-full max-w-64 flex-col gap-2"
    >
      <p id="scrub-frame" className="m-0 text-xs font-medium">
        Frame
      </p>
      <div className="grid grid-cols-2 gap-2">
        {fields.map(({ label, handle, ...options }) => (
          <NumberInput key={label} {...options}>
            <NumberInputGroup variant="plain">
              <NumberInputScrubArea pixelsPerStep={1}>
                <span aria-hidden="true">{handle}</span>
                <NumberInputScrubAreaCursor />
              </NumberInputScrubArea>
              <NumberInputControl aria-label={label} />
            </NumberInputGroup>
          </NumberInput>
        ))}
      </div>
    </div>
  )
}

export { UiSdkNumberInputScrub }

Add this example

This adds the example as components/examples/ui-sdk-number-input/scrub.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-scrub.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.

NumberInputGroup

Prop	Type	Default
`variant`Buttons on both sides, chevrons stacked at the end, or no buttons, for a scrub handle.	`"split" \| "stacked" \| "plain"`	`"split"`

NumberInputScrubArea

Prop	Type	Default
`pixelsPerStep`How far the pointer moves for one step.	`number`	`–`

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.