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

Parameter	Type
value	number
text	string
event	FocusEvent<HTMLInputElement, Element>

Returns

void

onChange?

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

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

Parameters

Parameter	Type
value	number
text	string

Returns

void

onFocus?

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

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

Parameters

Parameter	Type
value	number
text	string
event	FocusEvent<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

Parameter	Type
__namedParameters	DecrementStepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof DecrementStepperProps>

Returns

Element

IncrementStepper

IncrementStepper: (__namedParameters) => Element;

Parameters

Parameter	Type
__namedParameters	IncrementStepperProps & 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

Parameter	Type
__namedParameters	StepperProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StepperProps>

Returns

Element