Skip to content
Patternfly Logo

Number input

Examples

Default

With unit

%


$

With unit and thresholds

With a minimum value of 0 and maximum value of 10
%

Disabled

%

Varying sizes







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
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

.pf-c-number-input--pf-c-number-input__unit--c-input-group--MarginLeft
0.5rem
.pf-c-number-input--pf-c-number-input__icon--FontSize
0.75rem
.pf-c-number-input--pf-c-number-input--c-form-control--width-base
calc(0.5rem * 2)
.pf-c-number-input--pf-c-number-input--c-form-control--width-chars
4
.pf-c-number-input--pf-c-number-input--c-form-control--Width
calc(calc(0.5rem * 2) + 4 * 1ch)

View source on GitHub