Theme
Scrub field
A number field for a design tool. Drag its label sideways to scrub the value, type it, or step it with the arrow keys.
Examples
Type
px
‰
Props
ScrubField
A number field for a design tool: drag its label sideways to scrub the value, type it, or step it with the arrow keys (Shift for ten steps).
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Shown before the input, where dragging changes the value; also its accessible name. |
value | number | — | |
onChange | (value: number) => void | — | |
step? | number | 1 | One step: an arrow key, or a pixel dragged. Shift makes it ten. |
minValue? | number | — | |
maxValue? | number | — | |
unit? | string | — | A unit shown after the number, such as "px" or "‰". |
isDisabled? | boolean | false |
Keyboard
| Key | Does |
|---|---|
| ArrowUp or ArrowDown | One step up or down |
| Shift + ArrowUp or ArrowDown | Ten steps |
Accessibility
- A spin button named by its label; dragging the label is a pointer shortcut, never the only way.