# 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.

Canonical: https://hextaui.com/docs/ui-sdk-number-input/examples/scrub

Component docs: https://hextaui.com/docs/ui-sdk-number-input

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input-scrub.json
```

This adds `components/examples/ui-sdk-number-input/scrub.tsx` with the Number input component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-number-input/scrub.tsx"
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 }
```

## Props in this example

### NumberInputGroup

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

### NumberInputScrubArea

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

## More Number input examples

- [Min and max](https://hextaui.com/docs/ui-sdk-number-input/examples/min-max)
- [Step](https://hextaui.com/docs/ui-sdk-number-input/examples/step)
- [Currency, percent and units](https://hextaui.com/docs/ui-sdk-number-input/examples/format)
- [Locale](https://hextaui.com/docs/ui-sdk-number-input/examples/locale)
- [Mouse wheel](https://hextaui.com/docs/ui-sdk-number-input/examples/wheel)
- [Controlled](https://hextaui.com/docs/ui-sdk-number-input/examples/controlled)
- [Form](https://hextaui.com/docs/ui-sdk-number-input/examples/form)
- [Invalid](https://hextaui.com/docs/ui-sdk-number-input/examples/invalid)
- [Disabled](https://hextaui.com/docs/ui-sdk-number-input/examples/disabled)
- [Read-only](https://hextaui.com/docs/ui-sdk-number-input/examples/read-only)
- [Right to left](https://hextaui.com/docs/ui-sdk-number-input/examples/rtl)