Settings row for a bounded number: minus and plus either side of a typeable value, with hold-to-repeat, Shift for coarse steps and full keyboard stepping.
The import and the props worth knowing about, in one place.
import { InspectorStepper } from "@/components/beste/component/inspector-stepper";
// Uncontrolled
<InspectorStepper label="Columns" min={1} max={6} defaultValue={3} />
// Controlled, with a separate commit for expensive work
<InspectorStepper
label="Repeat"
value={repeat}
onValueChange={setRepeat} // every step
onValueCommit={(value) => console.log("persist", value)} // button or key release
min={1}
max={20}
/>
// Fractional steps set the decimals shown, and a unit can trail the number
<InspectorStepper label="Duration" min={0} max={5} step={0.25} suffix="s" defaultValue={1.5} />
<InspectorStepper label="Offset" min={-40} max={40} suffix="px" defaultValue={0} />
<InspectorStepper
label="Gap"
icon={Ruler} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
min={0}
max={64}
step={4}
value={gap}
onValueChange={setGap}
/>
// Hold either button to keep stepping; Shift multiplies the step by ten, and the
// value takes arrows, Page Up/Down, Home/End and typed input.
<InspectorStepper label="Delay" name="delay" min={0} max={1000} step={50} suffix="ms" />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Arrow Up / Down | One step. |
|---|---|
| Shift + Arrow | Ten steps. |
| Page Up / Page Down | Ten steps, without reaching for Shift. |
| Home / End | Jump to the minimum or the maximum. |
| Enter | Accept what was typed into the field. |
| Escape | Throw the draft away and put the committed value back. |
| Hold a button | Repeats, and speeds up the longer it is held. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | number | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | number | — | Initial value in uncontrolled mode. Falls back to `min`. |
onValueChange | (value: number) => void | — | Fires on every step, key press and accepted keystroke. |
onValueCommit | (value: number) => void | — | Fires once a change is finished — a button release, a key release, a typed value accepted on Enter or blur — and only when the value actually changed. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Amount one step moves. Also sets how many decimals the value shows. |
suffix | string | — | Muted unit after the number, e.g. "px", "%", "ms". |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
name | string | — | Name of the underlying input, so the row can take part in a form. |
id | string | — | Id of the input. Generated when omitted, to tie the label to it. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to the visible label. |