Number Field
number-fieldControlsA compact numeric input that commits once per gesture.
$ pnpm dlx shadcn@latest add @pluginui/core-number-fieldInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-number-field.jsonUsage
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 })}
/>About Number Field
The 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.
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.