Number Field
number-fieldControlsThe inspector's number control lets you type a value, step it with the arrow keys or optional − / + buttons, or drag the optional slider that shares its draft. It writes to the document once, on Enter, blur, a stepper click or slider release, never on every keystroke. A cleared field remains a draft rather than becoming zero, so clearing “60” to type “72” never writes 0 on the way. Optional features include a unit suffix, visible prefix label, ghost default on the slider track, stacked or single-row layouts, and the kit's three control heights. The Studio sampler inspector uses it for key, root, velocity, tune and loop fields.
Install
Copies the source into your project. Anything it depends on comes with it.
$ pnpm dlx shadcn@latest add @pluginui/core-number-fieldPulls in
First time? Add the registry to your components.json once:
{
"registries": {
"@pluginui": "https://pluginui.com/r/{name}.json"
}
}Usage
Connect the documented props to your application or host.
import { NumberField } from "@/components/ui/number-field"
<NumberField
aria-label="Root"
value={zone.root}
min={0}
max={127}
step={1}
unit="MIDI"
inputWidth="100%"
onValueCommitted={(next) => next !== null && edit({ root: next })}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueCommitted | number | null / (value: number | null) => void | — | The committed value; null is unset. Fires once per gesture. |
| onValueChange | (value: number | null) => void | — | The live draft while typing or dragging, for a preview that must follow the pointer. |
| min / max / step / largeStep | number | — | Bounds and the arrow-key, stepper and Shift+arrow steps. |
| slider / steppers | boolean | — | Draw a slider sharing the draft, and − / + buttons around the input. |
| label / unit | ReactNode | — | A compact visible prefix and suffix inside the field. |
| layout / size / inputWidth | "stacked" | "row" / "sm" | "md" | "lg" / string | — | Inspector line or stacked field, the kit's control heights, and the input's CSS width. |
| ghostValue | number | — | A default drawn as a tick on the slider; an unset field parks its thumb there. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.