Skip to content

Scrub Input

CSS

Drag a number sideways to change it while the digits roll. Press it to type.

Max tokens
1200
Top P
0.90
Timeout
30s

Install

$ npx shadcn@latest add https://spotcheckui.com/r/scrub-input.json

No motion engine needed.

Usage

import { ScrubInput } from "@/components/spotcheck/scrub-input"

<ScrubInput label="Max tokens" value={tokens} onValueChange={setTokens} min={0} max={4000} step={50} />

Hold Shift while dragging to move ten steps at a time.

Props

  • label * RequiredstringDefault —Names the control for screen readers and prints above the value.
  • valuenumberDefault —The current value, when you control it.
  • defaultValuenumberDefault 0The starting value, when it manages itself.
  • onValueChange(value: number) => voidDefault —
  • minnumberDefault -Infinity
  • maxnumberDefault —
  • stepnumberDefault 1How much one step changes the value.
  • unitstringDefault —Printed after the value, such as "ms".
  • classNamestringDefault —

Keyboard

↑ →Increase by a step
↓ ←Decrease by a step
Page UpIncrease by ten steps
Page DownDecrease by ten steps
HomeJump to the minimum
EndJump to the maximum
EnterType a value
EscCancel typing

Reduced motion

Digits change at once, without rolling.