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.

Examples

Default

With unit

%


$

With unit and thresholds

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

Disabled

%

Varying sizes







Props

Touchspin

NameTypeRequiredDefaultDescription
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

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

View source on GitHub