Skip to content
Patternfly Logo

Number input

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Default

With unit

%


$

With unit and thresholds

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

Disabled

%

Varying sizes







Props

NumberInput

NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the number input
inputAriaLabelstringNo'Input'Aria label of the input
inputNamestringNoName of the input
inputPropsanyNoAdditional properties added to the text input
isDisabledbooleanNofalseIndicates the whole number input should be disabled
maxnumberNoMaximum value of the number input, disabling the plus button when reached
minnumberNoMinimum value of the number input, disabling the minus button when reached
minusBtnAriaLabelstringNo'Minus'Aria label of the minus button
minusBtnPropsButtonPropsNoAdditional properties added to the minus button
onChange(event: React.FormEvent<HTMLInputElement>) => voidNoCallback for the text input changing
onMinus(event: React.MouseEvent, name?: string) => voidNoCallback for the minus button
onPlus(event: React.MouseEvent, name?: string) => voidNoCallback for the plus button
plusBtnAriaLabelstringNo'Plus'Aria label of the plus button
plusBtnPropsButtonPropsNoAdditional properties added to the plus button
unitReact.ReactNodeNoAdds the given unit to the number input
unitPosition'before' | 'after'No'after'Position of the number input unit in relation to the number input
valuenumberNo0Value of the number input
widthCharsnumberNoSets 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