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

- Slug: `scrub-field`
- Category: [Inputs](https://www.assembli.design/category/inputs.md)
- Type: component
- Tags: number-input, scrub, drag, design-tool, inspector, spinbutton, properties, math
- npm dependencies: none
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/scrub-field
- Page: https://www.assembli.design/components/scrub-field

![Scrub Field preview](https://www.assembli.design/thumbnails/scrub-field-light.png)

## Props

Other props pass through to the root element.

| 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` (required) | `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` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/scrub-field/scrub-field.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/scrub-field
```

Registry item JSON: https://www.assembli.design/r/scrub-field.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.