Scrub Field

The number field from Figma and Framer. Drag its label to scrub (Shift for steps of ten, Alt for tenths), or type arithmetic like "168*1.5" with or without the unit. Arrow keys step, Enter commits, Escape restores, double-clicking the label resets, and a bad entry shakes. Bounded fields can show a fill and angles wrap. Reads as a spinbutton; the demo is an inspector driving a live canvas.

Tags: number-input scrub drag design-tool inspector spinbutton properties math

Props

Other props pass through to the root element.

value
number
defaultValue
number
Default 0
onValueChange
(value: number) => void
onValueCommit
(value: number) => void
Called once a drag, a typed value or an arrow-key step has settled, e.g. to push one undo entry.
label*
React.ReactNode
Short text ("X", "W") or an icon. Drag it to scrub.
aria-label
string
Accessible name, needed when label is an icon.
unit
string
Shown after the number, e.g. "px", "%" or "°".
min
number
Default -Infinity
max
number
Default Infinity
step
number
Default 1
Step for arrow keys and scrubbing. Shift steps ten times as far, Alt a tenth.
pixelsPerStep
number
Default 2
Pixels of drag per step.
resetValue
number
Double-click the label to return to this value.
wrap
boolean
Default false
Wrap around instead of clamping, for angles.
fill
boolean
Default false
Draw a fill showing where the value sits between min and max.
disabled
boolean
Default false
name
string

Prop	Type	Default	Description
value	number	–
defaultValue	number	0
onValueChange	(value: number) => void	–
onValueCommit	(value: number) => void	–	Called once a drag, a typed value or an arrow-key step has settled, e.g. to push one undo entry.
label*	React.ReactNode	–	Short text ("X", "W") or an icon. Drag it to scrub.
aria-label	string	–	Accessible name, needed when `label` is an icon.
unit	string	–	Shown after the number, e.g. "px", "%" or "°".
min	number	-Infinity
max	number	Infinity
step	number	1	Step for arrow keys and scrubbing. Shift steps ten times as far, Alt a tenth.
pixelsPerStep	number	2	Pixels of drag per step.
resetValue	number	–	Double-click the label to return to this value.
wrap	boolean	false	Wrap around instead of clamping, for angles.
fill	boolean	false	Draw a fill showing where the value sits between `min` and `max`.
disabled	boolean	false
name	string	–