Skip to content
Patternfly Logo

Info alert:Beta feature

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



With unit



With unit and thresholds

With a minimum value of 0 and maximum value of 10



Varying sizes



classNamestringNoAdditional classes added to the touchspin
inputAriaLabelstringNo'Input'Aria label of the input
inputNamestringNoName of the input
inputPropsanyNoAdditional properties added to the touchspin text input
isDisabledbooleanNofalseIndicates the whole touchspin should be disabled
maxnumberNoMaximum value of the touchspin, disabling the plus button when reached
minnumberNoMinimum value of the touchspin, 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 touchspin unit to the touchspin
unitPosition'before' | 'after'No'after'Position of the touchspin unit in relation to the touchspin
valuenumberNo0Value of the touchspin
widthCharsnumberNoSets the width of the touchspin to a number of characters

CSS variables

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

View source on GitHub