Interface: NumberInputProps
Defined in: react/src/components/NumberInput/index.tsx:44
Properties
actionsRef?
optional actionsRef?: Ref<NumberInputMethods>;
Defined in: react/src/components/NumberInput/index.tsx:286
Receives focus and blur, which act on the input of InputField — the
element that takes the focus — and do nothing while
the input is disabled. ref reaches the root element itself.
blurOnEnter?
optional blurOnEnter?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:225
Commit and leave InputField when Enter is pressed. Enter commits either
way.
Default
true
changeEndDelay?
optional changeEndDelay?: number;
Defined in: react/src/components/NumberInput/index.tsx:264
How long after the last wheel notch, arrow key or typed character the change counts as over, in milliseconds. None of them has an event that says it is done.
Default
500
children
children: ReactNode;
Defined in: react/src/components/NumberInput/index.tsx:279
The input renders exactly what you compose here; there is no default markup to fall back to.
Example
<NumberInput.Root value={value} min={0} max={100} onChange={setValue}>
<NumberInput.InputField />
<NumberInput.Stepper>
<NumberInput.IncrementStepper />
<NumberInput.DecrementStepper />
</NumberInput.Stepper>
</NumberInput.Root>
clampValue?
optional clampValue?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:106
Keep the value within min and max when it is committed or stepped.
Typing is never clamped, so that a value can be entered digit by digit.
Default
true
disabled?
optional disabled?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:231
Make the input unchangeable and remove it from the tab order.
The parts carry data-disabled while it is set.
drag?
optional drag?: number | null;
Defined in: react/src/components/NumberInput/index.tsx:141
Pixels of vertical drag on Stepper that move the value by one step.
null turns the drag off.
Default
1
dragCursor?
optional dragCursor?: Cursor;
Defined in: react/src/components/NumberInput/index.tsx:178
The cursor to show while dragging a Stepper. It is set on the stepper
being dragged, so it stays while the pointer is outside it.
Default
'ns-resize'
dragSensitivity?
optional dragSensitivity?: ModifierValue<number>;
Defined in: react/src/components/NumberInput/index.tsx:155
How much a Stepper drag counts, per modifier key.
1 is drag pixels per step; 0.1 makes the same movement cover a
tenth of that. Shift is bound to 0.1 by default, to match what it does
on the arrow keys.
A modifier entry is not snapped to step, which is what lets a finer
amount move at all.
Default
{ default: 1, shift: 0.1 }
format?
optional format?: (value) => string;
Defined in: react/src/components/NumberInput/index.tsx:90
Render the value as text. Plain digits by default.
unitFormat from @tremolo-ui/functions builds this and parse together
for a unit, as a pair to spread into the root.
Parameters
| Parameter | Type |
|---|---|
value | number |
Returns
string
Example
<NumberInput.Root {...unitFormat('Hz', { digits: 2 })} value={v} />
keepCaretOnStep?
optional keepCaretOnStep?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:219
Put the caret in InputField back where it was after an arrow key steps
the value.
A controlled input whose value is replaced drops the caret at the end,
so without this the second press of a repeated step always acts on the
last digit. With it, the digit under the caret stays under the caret and
a column can be held while stepping.
The position is measured from the decimal point rather than from either
end, so it survives the number growing or shrinking: the caret between
9 and .9 is still between 10 and .0.
It only restores the caret. Which digit it sits on does not change the
size of the step — that is keyboard's to say.
Default
false
keyboard?
optional keyboard?: ModifierValue<InputEventOption> | null;
Defined in: react/src/components/NumberInput/index.tsx:135
How much one arrow key press moves the value.
['raw', n] moves the value by n, and ['normalized', n] by n of the
range between min and max. The result is snapped to step, except for
an amount set on a modifier key, which is what lets shift move off the
grid. null turns the arrow keys off.
The default moves by 1, and by 0.1 with shift. With a step above 1, raise
the amount to match: 1 would round straight back to where it started, and
a development build warns about it.
Default
{ default: ['raw', 1], shift: ['raw', 0.1] }
max?
optional max?: number;
Defined in: react/src/components/NumberInput/index.tsx:64
Highest value. Leave it out for no upper bound.
It is enforced when a value is committed or stepped, while clampValue is
on. A value above it carries data-out-of-range on InputField.
min?
optional min?: number;
Defined in: react/src/components/NumberInput/index.tsx:57
Lowest value. Leave it out for no lower bound.
It is enforced when a value is committed or stepped, while clampValue is
on. A value below it carries data-out-of-range on InputField.
onChange?
optional onChange?: (value) => void;
Defined in: react/src/components/NumberInput/index.tsx:243
Called with the new value. While the user types, it is called for every entry that reads as a number, unclamped; committing the entry calls it again if clamping changes the value.
Parameters
| Parameter | Type |
|---|---|
value | number |
Returns
void
onChangeEnd?
optional onChangeEnd?: (value, source) => void;
Defined in: react/src/components/NumberInput/index.tsx:256
Called when the change ends, with the value it ended on: when the stepper
is released, when typed text is committed, or changeEndDelay after the
last wheel notch or arrow key.
Parameters
| Parameter | Type |
|---|---|
value | number |
source | ChangeSource |
Returns
void
onChangeStart?
optional onChangeStart?: (value, source) => void;
Defined in: react/src/components/NumberInput/index.tsx:250
Called when a change of the value starts — a press on a stepper, the
first wheel notch, arrow key or typed character — with the value before
it and what it is made with. A host recording automation can treat the
input as touched from here until onChangeEnd.
Parameters
| Parameter | Type |
|---|---|
value | number |
source | ChangeSource |
Returns
void
parse?
optional parse?: (text) => number;
Defined in: react/src/components/NumberInput/index.tsx:99
Read a value back out of the text. Has to undo format.
Text with no number in it reads as NaN, which leaves the value alone.
The default, parseNumberText from @tremolo-ui/dom, reads the number
with the unit around it left out, and is NaN for one it cannot read
whole: 1,000, 1:30, or a number with a unit in front, such as L 30.
Parameters
| Parameter | Type |
|---|---|
text | string |
Returns
number
pointerLock?
optional pointerLock?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:171
Hide the cursor while dragging a Stepper and read the pointer movement
directly, rather than letting it wander off across the screen.
The drag is already relative, so the pointer position carries nothing — but it still runs into the edge of the screen, where the operating system pins it and the coordinates stop changing.
Off by default: the browser shows its own notice, Esc takes the lock back, and the request can be refused. A refused request is not an error, and the drag carries on as an ordinary one.
Default
false
readOnly?
optional readOnly?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:236
Make the value unchangeable.
The parts carry data-readonly while it is set.
scale?
optional scale?: Scale;
Defined in: react/src/components/NumberInput/index.tsx:79
How the value is distributed across the travel of a drag or a
'normalized' wheel / keyboard nudge.
Default
linearScale
selectOnFocus?
optional selectOnFocus?: "number" | "none" | "all";
Defined in: react/src/components/NumberInput/index.tsx:186
Select the text when InputField takes focus: 'all' selects all of it,
'number' only the number, leaving the unit the format put around it,
and 'none' leaves the caret where the click put it.
Default
'none'
step?
optional step?: number;
Defined in: react/src/components/NumberInput/index.tsx:72
Granularity of the value. The steppers, a drag on Stepper, the wheel and
the arrow keys snap it to multiples of step; a typed value is left as it
is.
Default
1
unformatOnFocus?
optional unformatOnFocus?: boolean;
Defined in: react/src/components/NumberInput/index.tsx:200
Show the plain value while InputField has focus, dropping whatever
format put around it: an input reading 1.23kHz shows 1230 to be
typed over.
The number shown is the value itself, not the number inside the formatted
text. Those differ whenever the format scales — 1.23 out of 1.23kHz
would read back as 1.23 and lose a factor of a thousand — and it is also
why a rounded display no longer becomes the value: 1.6 shown as 2Hz
offers 1.6 for editing, not 2.
Default
false
value
value: number;
Defined in: react/src/components/NumberInput/index.tsx:49
The value. What the input shows is format(value), except while the user
is typing, when their own text stands until it is committed.
wheel?
optional wheel?: ModifierValue<InputEventOption> | null;
Defined in: react/src/components/NumberInput/index.tsx:120
How much one notch of the wheel moves the value. It only acts while the focus is inside, so that scrolling the page past the input leaves it alone.
['raw', n] moves the value by n, and ['normalized', n] by n of the
range between min and max. The result is snapped to step, except for
an amount set on a modifier key ({ default: …, shift: … }). null turns
the wheel off.
Default
['raw', 1]