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 lower threshold reached

%

With unit and upper threshold reached

%

Disabled

%

Varying sizes







Documentation

Overview

Usage

Class
Applied
Outcome
.pf-c-touchspin
<div>
Initiates the touchspin component.
.pf-c-touchspin__icon
<span>
Initiates the touchspin icon.
.pf-c-touchspin__unit
<span>
Initiates the touchspin unit.
--pf-c-touchspin--c-form-control--width-chars
.pf-c-touchspin
Specifies the number of characters to show in the input.

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