InputNumber API

API documentation for InputNumber component

InputNumber#

Props#

Defines valid properties in InputNumber component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: InputNumberInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InputNumberInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<InputNumberPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: InputNumberInstance) => ReactNode)	null	The children to render.
size	"small" \| "large"	null	Defines the size of the component.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
disabled	boolean	false	When present, it specifies that the component should be disabled.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
readOnly	boolean	false	When present, it specifies that an input field is read-only.
placeholder	string	null	Placeholder text for the input.
fluid	boolean	null	Spans 100% width of the container when enabled.
onValueChange	(event: InputNumberValueChangeEvent) => void	null	Callback fired when the input number's value changes.
value	number	undefined	Specifies whether a inputnumber should be checked or not.
defaultValue	number	undefined	Specifies whether a inputnumber should be checked or not.
name	string	null	The name attribute for the element, typically used in form submissions.
format	boolean	true	Whether to format the value.
locale	string	null	Locale to be used in formatting.
localeMatcher	"lookup" \| "best fit"	'best fit'	The locale matching algorithm to use. Possible values are 'lookup' and 'best fit'; the default is 'best fit'. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_negotiation) for details.
mode	"decimal" \| "currency"	decimal	Defines the behavior of the component.
prefix	string	null	Text to display before the value.
suffix	string	null	Text to display after the value.
currency	string	null	The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB. There is no default value; if the style is 'currency', the currency property must be provided.
currencyDisplay	"symbol" \| "code" \| "name" \| "narrowSymbol"	null	How to display the currency in currency formatting. Possible values are 'symbol' to use a localized currency symbol such as €, 'code' to use the ISO currency code, 'name' to use a localized currency name such as 'dollar'.
useGrouping	boolean	true	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigits	number	null	The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
maxFractionDigits	number	null	The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
roundingMode	"ceil" \| "floor" \| "expand" \| "trunc" \| "halfCeil" \| "halfFloor" \| "halfExpand" \| "halfTrunc" \| "halfEven"	null	How decimals should be rounded. [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
min	number	null	Minimum boundary value.
max	number	null	Maximum boundary value.
step	number	1	Step factor to increment/decrement the value.
allowEmpty	boolean	true	Determines whether the input field is empty.
highlightOnFocus	boolean	false	Highlights automatically the input value.
target	HTMLInputElement \| RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to external input element for InputGroup integration.
onChange	(event: useInputNumberValueChangeEvent) => void	null	Callback to invoke when value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by InputNumber component.

name	type	default	description
state	useInputNumberState	null	State of the input number.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Input event handler.
onInputKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Input key down event handler.
onInputKeyPress	(event: KeyboardEvent<HTMLInputElement>) => void	null	Input key press event handler.
onInputClick	() => void	null	Input click event handler.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.
onInputFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Input focus event handler.
onInputBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Input blur event handler.
maxBoundry	() => boolean	null	Checks if the maximum boundary is reached.
minBoundry	() => boolean	null	Checks if the minimum boundary is reached.
increment	(event: PointerEvent<HTMLButtonElement> \| KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLInputElement, MouseEvent>, dir: number) => void	null	Increments the input number value.
decrement	(event: PointerEvent<HTMLButtonElement> \| KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLInputElement, MouseEvent>, dir: number) => void	null	Decrements the input number value.
stopSpin	() => void	null	Stops the spinning/repeating increment/decrement actions.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InputNumber component.

name	type	default	description
root	InputNumberPassThroughType<InputHTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.
input	InputNumberPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.

Types#

Instance

Instance of InputNumber component.

values
ComponentInstance<InputNumberProps, InputNumberState, InputNumberExposes>

useInputNumber#

Props#

Defines valid properties in useInputNumber.

name	type	default	description
value	number	undefined	Specifies whether a inputnumber should be checked or not.
defaultValue	number	undefined	Specifies whether a inputnumber should be checked or not.
name	string	null	The name attribute for the element, typically used in form submissions.
format	boolean	true	Whether to format the value.
locale	string	null	Locale to be used in formatting.
localeMatcher	"lookup" \| "best fit"	'best fit'	The locale matching algorithm to use. Possible values are 'lookup' and 'best fit'; the default is 'best fit'. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_negotiation) for details.
mode	"decimal" \| "currency"	decimal	Defines the behavior of the component.
prefix	string	null	Text to display before the value.
suffix	string	null	Text to display after the value.
currency	string	null	The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB. There is no default value; if the style is 'currency', the currency property must be provided.
currencyDisplay	"symbol" \| "code" \| "name" \| "narrowSymbol"	null	How to display the currency in currency formatting. Possible values are 'symbol' to use a localized currency symbol such as €, 'code' to use the ISO currency code, 'name' to use a localized currency name such as 'dollar'.
useGrouping	boolean	true	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigits	number	null	The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
maxFractionDigits	number	null	The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
roundingMode	"ceil" \| "floor" \| "expand" \| "trunc" \| "halfCeil" \| "halfFloor" \| "halfExpand" \| "halfTrunc" \| "halfEven"	null	How decimals should be rounded. [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
min	number	null	Minimum boundary value.
max	number	null	Maximum boundary value.
step	number	1	Step factor to increment/decrement the value.
allowEmpty	boolean	true	Determines whether the input field is empty.
highlightOnFocus	boolean	false	Highlights automatically the input value.
target	HTMLInputElement \| RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to external input element for InputGroup integration.
onChange	(event: useInputNumberValueChangeEvent) => void	null	Callback to invoke when value changes.
onValueChange	(event: useInputNumberValueChangeEvent) => void	null	Callback to invoke after validation check and value change.

Exposes#

Defines the methods and properties exposed by useInputNumber.

name	type	default	description
state	useInputNumberState	null	State of the input number.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Input event handler.
onInputKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Input key down event handler.
onInputKeyPress	(event: KeyboardEvent<HTMLInputElement>) => void	null	Input key press event handler.
onInputClick	() => void	null	Input click event handler.
onPaste	(event: ClipboardEvent<HTMLInputElement>) => void	null	Paste event handler.
onInputFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Input focus event handler.
onInputBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Input blur event handler.
maxBoundry	() => boolean	null	Checks if the maximum boundary is reached.
minBoundry	() => boolean	null	Checks if the minimum boundary is reached.
increment	(event: PointerEvent<HTMLButtonElement> \| KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLInputElement, MouseEvent>, dir: number) => void	null	Increments the input number value.
decrement	(event: PointerEvent<HTMLButtonElement> \| KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLInputElement, MouseEvent>, dir: number) => void	null	Decrements the input number value.
stopSpin	() => void	null	Stops the spinning/repeating increment/decrement actions.

Events#

useInputNumberValueChangeEvent

Custom value change event.

name	type	description
originalEvent	PointerEvent<HTMLButtonElement> \| ChangeEvent<HTMLInputElement> \| FormEvent<HTMLInputElement> \| KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLInputElement, MouseEvent>	Original browser event.
value	number	New value.

Types#

Instance

Instance of useInputNumber headless.

values
HeadlessInstance<useInputNumberProps, useInputNumberState, useInputNumberExposes>

On this page

InputNumber
Props
Exposes
Interfaces
Types
useInputNumber
Props
Exposes
Events
Types