Number input

A number input provides a quick and effective way for users to enter and modify a numeric value. Similar to input groups, number inputs combine 2 input types into 1 control: A text input field with buttons on either side. When combined, these elements allow users to input numeric values in a responsive and scalable way.

Examples

Default

With unit

With unit and thresholds

To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.

With a minimum value of 0 and maximum value of 10

Disabled

With status

In the following example, the validated status will update based on the value of the number input and how far from the number 5 it is.

Varying sizes

Custom increment/decrement

Custom increment/decrement and thresholds

Props

NumberInput

*required
Name	Type	Default	Description
className	string		Additional classes added to the number input
inputAriaLabel	string	'Input'	Aria label of the input
inputName	string		Name of the input
inputProps	any		Additional properties added to the text input
isDisabled	boolean	false	Indicates the whole number input should be disabled
max	number		Maximum value of the number input, disabling the plus button when reached
min	number		Minimum value of the number input, disabling the minus button when reached
minusBtnAriaLabel	string	'Minus'	Aria label of the minus button
minusBtnProps	ButtonProps		Additional properties added to the minus button
onBlur	(event?: any) => void		Callback function when text input is blurred (focus leaves)
onChange	(event: React.FormEvent<HTMLInputElement>) => void		Callback for the text input changing
onMinus	(event: React.MouseEvent, name?: string) => void	() => {}	Callback for the minus button
onPlus	(event: React.MouseEvent, name?: string) => void	() => {}	Callback for the plus button
plusBtnAriaLabel	string	'Plus'	Aria label of the plus button
plusBtnProps	ButtonProps		Additional properties added to the plus button
unit	React.ReactNode		Adds the given unit to the number input
unitPosition	'before' \| 'after'	'after'	Position of the number input unit in relation to the number input
validatedBeta	'default' \| 'error' \| 'warning' \| 'success' \| ValidatedOptions	ValidatedOptions.default	Value to indicate if the input is modified to show that validation state
value	number \| ''	0	Value of the number input
widthChars	number		Sets the width of the number input to a number of characters

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-number-input	--pf-v5-c-number-input__unit--c-input-group--MarginLeft	0.5rem
--pf-v5-c-number-input__unit--c-input-group--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-number-input	--pf-v5-c-number-input__icon--FontSize	0.75rem
--pf-v5-c-number-input__icon--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-v5-c-number-input	--pf-v5-c-number-input--c-form-control--width-base	calc(0.5rem * 2 + 1px * 2)
--pf-v5-c-number-input--c-form-control--width-base calc(--pf-v5-global--spacer--sm * 2 + --pf-v5-global--BorderWidth--sm * 2) calc($pf-v5-global--spacer--sm * 2 + $pf-v5-global--BorderWidth--sm * 2) calc(pf-size-prem(8px) * 2 + 1px * 2) calc(0.5rem * 2 + 1px * 2)
	.pf-v5-c-number-input	--pf-v5-c-number-input--c-form-control--width-icon	0px
	.pf-v5-c-number-input	--pf-v5-c-number-input--m-status--c-form-control--width-icon	2rem
--pf-v5-c-number-input--m-status--c-form-control--width-icon --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-number-input	--pf-v5-c-number-input--c-form-control--width-chars	4
	.pf-v5-c-number-input	--pf-v5-c-number-input--c-form-control--Width	calc( calc( calc(0.5rem * 2 + 1px * 2) + 4 * 1ch ) + 0px )
--pf-v5-c-number-input--c-form-control--Width calc( calc( --pf-v5-c-number-input--c-form-control--width-base + --pf-v5-c-number-input--c-form-control--width-chars * 1ch ) + --pf-v5-c-number-input--c-form-control--width-icon ) calc( calc( calc(--pf-v5-global--spacer--sm * 2 + --pf-v5-global--BorderWidth--sm * 2) + 4 * 1ch ) + 0px ) calc( calc( calc($pf-v5-global--spacer--sm * 2 + $pf-v5-global--BorderWidth--sm * 2) + 4 * 1ch ) + 0px ) calc( calc( calc(pf-size-prem(8px) * 2 + 1px * 2) + 4 * 1ch ) + 0px ) calc( calc( calc(0.5rem * 2 + 1px * 2) + 4 * 1ch ) + 0px )
	.pf-v5-c-number-input.pf-m-status	--pf-v5-c-number-input--c-form-control--width-icon	2rem
--pf-v5-c-number-input--c-form-control--width-icon --pf-v5-c-number-input--m-status--c-form-control--width-icon --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem

View source on GitHub