Skip to content
Patternfly Logo

Number input



With unit



With unit and thresholds

With a minimum value of 0 and maximum value of 10



Varying sizes

Custom increment/decrement

Custom increment/decrement and thresholds



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
valuenumber0Value of the number input
widthCharsnumberSets the width of the number input to a number of characters

CSS variables

calc(0.5rem * 2 + 1px * 2)
calc(calc(0.5rem * 2 + 1px * 2) + 4 * 1ch)

View source on GitHub