Scrub Input

Figma-style drag-to-change number field

Drag horizontally across the label to scrub the value — hold Shift for ×10 or Alt for ×0.1 — or click the number to type it directly. Arrow keys nudge when the field is focused.

Preview

W180px

R16px

O0.90

Drag a label or type a value.

Preview

180px · 16px · 0.90

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/scrub-input.json

Usage

Import the component:

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

Use it in your code:

<ScrubInput
  label="W"
  defaultValue={320}
  min={0}
  max={1920}
  suffix="px"
  onChange={(value) => setWidth(value)}
/>

Props

Property	Type	Default	Description
label	string	—	Short label shown in the drag zone, e.g. "W".
defaultValue	number	0	Initial value.
min / max	number	±Infinity	Clamp range for the value.
step	number	1	Snap increment. Decimal steps set the displayed precision.
suffix	string	—	Unit rendered after the number, e.g. "px".
sensitivity	number	0.5	Value change per pixel dragged.
onChange	(value: number) => void	—	Fires on every committed change.

Components