メインコンテンツまでスキップ

components/NumberInput

Interfaces​

NumberInputFieldProps​

Defined in: react/src/components/NumberInput/InputField.tsx:16

Properties​

blurOnEnter?​
optional blurOnEnter?: boolean;

Defined in: react/src/components/NumberInput/InputField.tsx:58

Commit and leave the input when Enter is pressed. Enter commits either way.

Default​
true
className?​
optional className?: string;

Defined in: react/src/components/NumberInput/InputField.tsx:60

keepCaretOnStep?​
optional keepCaretOnStep?: boolean;

Defined in: react/src/components/NumberInput/InputField.tsx:53

Put the caret 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
ref?​
optional ref?: Ref<HTMLInputElement>;

Defined in: react/src/components/NumberInput/InputField.tsx:62

selectOnFocus?​
optional selectOnFocus?: "number" | "none" | "all";

Defined in: react/src/components/NumberInput/InputField.tsx:22

Select the text when the input takes focus. 'number' selects the leading number, leaving whatever the format appended to it.

Default​
'none'
style?​
optional style?: CSSProperties;

Defined in: react/src/components/NumberInput/InputField.tsx:61

unformatOnFocus?​
optional unformatOnFocus?: boolean;

Defined in: react/src/components/NumberInput/InputField.tsx:35

Show the plain value while the input 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

NumberInputMethods​

Defined in: react/src/components/NumberInput/index.tsx:166

Properties​

blur​
blur: () => void;

Defined in: react/src/components/NumberInput/index.tsx:168

Returns​

void

focus​
focus: () => void;

Defined in: react/src/components/NumberInput/index.tsx:167

Returns​

void

NumberInputProps​

Defined in: react/src/components/NumberInput/index.tsx:39

Properties​

children​
children: ReactNode;

Defined in: react/src/components/NumberInput/index.tsx:163

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:79

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
className?​
optional className?: string;

Defined in: react/src/components/NumberInput/index.tsx:146

disabled?​
optional disabled?: boolean;

Defined in: react/src/components/NumberInput/index.tsx:139

Only the appearance will change. Please consider using with readonly. aria-disabled property is also applied.

drag?​
optional drag?: number | null;

Defined in: react/src/components/NumberInput/index.tsx:102

Pixels of vertical drag on Stepper that move the value by one step. If null, no event will be triggered

Default​
1
dragSensitivity?​
optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/NumberInput/index.tsx:116

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:66

Render the value as text. Plain digits by default.

unitFormat from @tremolo-ui/functions builds this and parse together for a unit, and spreads into the input:

Parameters​
ParameterType
valuenumber
Returns​

string

Example​
<NumberInput.Root {...unitFormat('Hz', { digits: 2 })} value={v} />
keyboard?​
optional keyboard?: InputEventOptions | null;

Defined in: react/src/components/NumberInput/index.tsx:96

How much one arrow key press moves the value.

Shift moves a tenth of a step by default. Name a modifier to change that, or pass a bare ['raw', 1] to use no modifier at all. A modifier amount is not snapped to step.

If null, no event will be triggered

max?​
optional max?: number;

Defined in: react/src/components/NumberInput/index.tsx:47

min?​
optional min?: number;

Defined in: react/src/components/NumberInput/index.tsx:46

onChange?​
optional onChange?: (value) => void;

Defined in: react/src/components/NumberInput/index.tsx:148

Parameters​
ParameterType
valuenumber
Returns​

void

parse?​
optional parse?: (text) => number;

Defined in: react/src/components/NumberInput/index.tsx:72

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.

Parameters​
ParameterType
textstring
Returns​

number

pointerLock?​
optional pointerLock?: boolean;

Defined in: react/src/components/NumberInput/index.tsx:132

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:144

Make the value unchangeable. aria-readonly property is also applied.

scale?​
optional scale?: Scale;

Defined in: react/src/components/NumberInput/index.tsx:55

How the value is distributed across the travel of a drag or a 'normalized' wheel / keyboard nudge.

Default​
linearScale
step?​
optional step?: number;

Defined in: react/src/components/NumberInput/index.tsx:48

style?​
optional style?: CSSProperties;

Defined in: react/src/components/NumberInput/index.tsx:147

value​
value: number;

Defined in: react/src/components/NumberInput/index.tsx:44

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?: InputEventOptions | null;

Defined in: react/src/components/NumberInput/index.tsx:86

Wheel control option. Only applies while the focus is inside, so that scrolling past the input does not change it. If null, no event will be triggered

StepperProps​

Defined in: react/src/components/NumberInput/Stepper.tsx:23

Properties​

children?​
optional children?: ReactNode;

Defined in: react/src/components/NumberInput/Stepper.tsx:27

<NumberInput.IncrementStepper /> and <NumberInput.DecrementStepper /> go here.

className?​
optional className?: string;

Defined in: react/src/components/NumberInput/Stepper.tsx:24

ref?​
optional ref?: Ref<HTMLDivElement>;

Defined in: react/src/components/NumberInput/Stepper.tsx:28

style?​
optional style?: CSSProperties;

Defined in: react/src/components/NumberInput/Stepper.tsx:25

Type Aliases​

DecrementStepperProps​

type DecrementStepperProps = StepperButtonProps;

Defined in: react/src/components/NumberInput/DecrementStepper.tsx:9

IncrementStepperProps​

type IncrementStepperProps = StepperButtonProps;

Defined in: react/src/components/NumberInput/IncrementStepper.tsx:9

Variables​

NumberInput​

const NumberInput: object;

Defined in: react/src/components/NumberInput/index.tsx:405

Input with some useful functions for entering numerical values.

Type Declaration​

DecrementStepper​
DecrementStepper: (props) => Element;

Lowers the value by one step, repeating while held.

Parameters​
ParameterType
propsStepperButtonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StepperButtonProps>
Returns​

Element

IncrementStepper​
IncrementStepper: (props) => Element;

Raises the value by one step, repeating while held.

Parameters​
ParameterType
propsStepperButtonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StepperButtonProps>
Returns​

Element

InputField​
InputField: (__namedParameters) => Element;

The text field of a NumberInput, and the only place the value can be typed.

While the user types, their own text stands rather than format(value), so that a half-finished entry is not rewritten under the caret.

Parameters​
ParameterType
__namedParametersNumberInputFieldProps & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "type" | "defaultValue" | keyof NumberInputFieldProps>
Returns​

Element

Root​
Root: ForwardRefExoticComponent<NumberInputProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & RefAttributes<NumberInputMethods>>;
Stepper​
Stepper: (__namedParameters) => Element;

The area the steppers sit in, and a drag handle in its own right: dragging it up and down moves the value one step every drag pixels.

The drag lives here rather than on InputField because createDrag turns off text selection on whatever element it is attached to.

Parameters​
ParameterType
__namedParametersStepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StepperProps>
Returns​

Element

Root​

const Root: ForwardRefExoticComponent<NumberInputProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & RefAttributes<NumberInputMethods>>;

Defined in: react/src/components/NumberInput/index.tsx:188

Functions​

useNumberInputContext()​

Call Signature​

function useNumberInputContext(): NumberInputContextValue;

Defined in: react/src/components/NumberInput/context.tsx:81

The only state behind this is the editing draft; value comes from the props of Root and everything else is derived during render.

Returns​

NumberInputContextValue

Call Signature​

function useNumberInputContext<T>(selector): T;

Defined in: react/src/components/NumberInput/context.tsx:82

The only state behind this is the editing draft; value comes from the props of Root and everything else is derived during render.

Type Parameters​
Type Parameter
T
Parameters​
ParameterType
selector(state) => T
Returns​

T