Skip to main content

components/NumberInput

Interfaces​

DecrementStepperProps​

Defined in: components/NumberInput/DecrementStepper.tsx:8

Properties​

children?​
optional children?: ReactNode;

Defined in: components/NumberInput/DecrementStepper.tsx:10

size?​
optional size?: number;

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

IncrementStepperProps​

Defined in: components/NumberInput/IncrementStepper.tsx:8

Properties​

children?​
optional children?: ReactNode;

Defined in: components/NumberInput/IncrementStepper.tsx:10

size?​
optional size?: number;

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

NumberInputMethods​

Defined in: components/NumberInput/index.tsx:90

Properties​

blur​
blur: () => void;

Defined in: components/NumberInput/index.tsx:92

Returns​

void

focus​
focus: () => void;

Defined in: components/NumberInput/index.tsx:91

Returns​

void

NumberInputProps​

Defined in: components/NumberInput/index.tsx:19

Properties​

activeColor?​
optional activeColor?: string;

Defined in: components/NumberInput/index.tsx:71

blurOnEnter?​
optional blurOnEnter?: boolean;

Defined in: components/NumberInput/index.tsx:56

children?​
optional children?: ReactNode;

Defined in: components/NumberInput/index.tsx:87

clampValueOnBlur?​
optional clampValueOnBlur?: boolean;

Defined in: components/NumberInput/index.tsx:58

digit?​
optional digit?: number;

Defined in: components/NumberInput/index.tsx:49

Digits for rounding numbers.

Example​
with:
units={[['Hz', 1], ['kHz', 1000]]}
digit={3}
results:
value=100 -> 100Hz, value=1600 -> 1.60Hz
keepWithinRange?​
optional keepWithinRange?: boolean;

Defined in: components/NumberInput/index.tsx:57

keyboard?​
optional keyboard?: InputEventOption | null;

Defined in: components/NumberInput/index.tsx:69

keyboard control option If null, no event will be triggered

max?​
optional max?: number;

Defined in: components/NumberInput/index.tsx:29

Number.MAX_SAFE_INTEGER

min?​
optional min?: number;

Defined in: components/NumberInput/index.tsx:25

Number.MIN_SAFE_INTEGER

onBlur?​
optional onBlur?: (value, text, event) => void;

Defined in: components/NumberInput/index.tsx:81

Parameters​
ParameterType
valuenumber
textstring
eventFocusEvent<HTMLInputElement, Element>
Returns​

void

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

Defined in: components/NumberInput/index.tsx:75

Parameters​
ParameterType
valuenumber
textstring
Returns​

void

onFocus?​
optional onFocus?: (value, text, event) => void;

Defined in: components/NumberInput/index.tsx:76

Parameters​
ParameterType
valuenumber
textstring
eventFocusEvent<HTMLInputElement, Element>
Returns​

void

readonly?​
optional readonly?: boolean;

Defined in: components/NumberInput/index.tsx:51

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

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

step?​
optional step?: number;

Defined in: components/NumberInput/index.tsx:30

units?​
optional units?: string | Units;

Defined in: components/NumberInput/index.tsx:38

Example​
units='Hz'
units={[['Hz', 1], ['kHz', 1000]]}
units={[['ms', 1], ['s', 1000]]}
value​
value: string | number;

Defined in: components/NumberInput/index.tsx:20

variant?​
optional variant?: "filled" | "outline" | "flushed" | "unstyled";

Defined in: components/NumberInput/index.tsx:53

wheel?​
optional wheel?: InputEventOption | null;

Defined in: components/NumberInput/index.tsx:64

wheel control option If null, no event will be triggered

wrapperClassName?​
optional wrapperClassName?: string;

Defined in: components/NumberInput/index.tsx:73

StepperProps​

Defined in: components/NumberInput/Stepper.tsx:4

Properties​

children?​
optional children?: ReactNode;

Defined in: components/NumberInput/Stepper.tsx:7

dynamic?​
optional dynamic?: boolean;

Defined in: components/NumberInput/Stepper.tsx:6

Display only when hovering.

Type Aliases​

Units​

type Units = [string, number][];

Defined in: components/NumberInput/type.ts:6

[unit, scale][]

Example​

[['Hz', 1], ['kHz', 1000]]

Variables​

NumberInput​

const NumberInput: object;

Defined in: components/NumberInput/index.tsx:177

Input with some useful functions for entering numerical values.

Type Declaration​

DecrementStepper​
DecrementStepper: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersDecrementStepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof DecrementStepperProps>
Returns​

Element

IncrementStepper​
IncrementStepper: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersIncrementStepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof IncrementStepperProps>
Returns​

Element

Root​
Root: ForwardRefExoticComponent<NumberInputProps & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & RefAttributes<NumberInputMethods>>;
Stepper​
Stepper: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersStepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StepperProps>
Returns​

Element