Components

Number input

Number Input

The number input provides controls for editing, incrementing or decrementing numeric values using the keyboard or pointer.

NumberInputProps

allowMouseWheel

boolean

Whether to allow mouse wheel to change the value

allowOverflow

boolean

Whether to allow the value overflow the min/max range

clampValueOnBlur

boolean

Whether to clamp the value when the input loses focus (blur)

defaultValue

string

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

Whether the number input is disabled.

focusInputOnChange

boolean

Whether to focus input when the value changes

form

string

The associate form of the input element.

format

(value: string) => string | number

If using a custom display format, this converts the default format to the custom format.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

string

The unique identifier of the machine.

ids

Partial<{ root: string label: string input: string incrementTrigger: string decrementTrigger: string scrubber: string }>

The ids of the elements in the number input. Useful for composition.

inputMode

InputMode

Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices

invalid

boolean

Whether the number input value is invalid.

max

number

The maximum value of the number input

maxFractionDigits

number

The maximum number of fraction digits to use. Possible values are from 0 to 20;

min

number

The minimum value of the number input

minFractionDigits

number

The minimum number of fraction digits to use. Possible values are from 0 to 20

name

string

The name attribute of the number input. Useful for form submission.

onFocusChange

(details: FocusChangeDetails) => void

Function invoked when the number input is focused

onValueChange

(details: ValueChangeDetails) => void

Function invoked when the value changes

onValueInvalid

(details: ValueInvalidDetails) => void

Function invoked when the value overflows or underflows the min/max range

parse

(value: string) => string

If using a custom display format, this converts the custom format to a format `parseFloat` understands.

pattern

string

The pattern used to check the <input> element's value against

readOnly

boolean

Whether the number input is readonly

spinOnPress

boolean

Whether to spin the value when the increment/decrement button is pressed

step

number

The amount to increment or decrement the value by

translations

IntlTranslations

Specifies the localized strings that identifies the accessibility elements and their states

validateCharacter

(char: string) => boolean

Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/

value

string

The value of the input

NumberInputContext

blur

() => void

Function to blur the input.

clearValue

() => void

Function to clear the value of the input.

controlProps

Dict<any>

decrement

() => void

Function to decrement the value of the input by the step.

decrementTriggerProps

Dict<any>

focus

() => void

Function to focus the input.

increment

() => void

Function to increment the value of the input by the step.

incrementTriggerProps

Dict<any>

inputProps

Dict<any>

isFocused

boolean

Whether the input is focused.

isInvalid

boolean

Whether the input is invalid.

isValueEmpty

boolean

Whether the input value is empty.

labelProps

Dict<any>

rootProps

Dict<any>

scrubberProps

Dict<any>

setToMax

() => void

Function to set the value of the input to the max.

setToMin

() => void

Function to set the value of the input to the min.

setValue

(value: string | number) => void

Function to set the value of the input.

value

string

The formatted value of the input.

valueAsNumber

number

The value of the input as a number.