PatternFly

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
NameTypeDefaultDescription
classNamestringAdditional classes added to the number input
inputAriaLabelstring'Input'Aria label of the input
inputNamestringName of the input
inputPropsanyAdditional properties added to the text input
isDisabledbooleanfalseIndicates the whole number input should be disabled
maxnumberMaximum value of the number input, disabling the plus button when reached
minnumberMinimum value of the number input, disabling the minus button when reached
minusBtnAriaLabelstring'Minus'Aria label of the minus button
minusBtnPropsButtonPropsAdditional properties added to the minus button
onBlur(event?: any) => voidCallback function when text input is blurred (focus leaves)
onChange(event: React.FormEvent<HTMLInputElement>) => voidCallback 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
plusBtnAriaLabelstring'Plus'Aria label of the plus button
plusBtnPropsButtonPropsAdditional properties added to the plus button
unitReact.ReactNodeAdds 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' | ValidatedOptionsValidatedOptions.defaultValue to indicate if the input is modified to show that validation state
valuenumber | ''0Value of the number input
widthCharsnumberSets the width of the number input to a number of characters

CSS variables

SelectorVariableValue
.pf-v5-c-number-input--pf-v5-c-number-input__unit--c-input-group--MarginLeft
0.5rem
.pf-v5-c-number-input--pf-v5-c-number-input__icon--FontSize
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--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--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.pf-m-status--pf-v5-c-number-input--c-form-control--width-icon
2rem

View source on GitHub