Skip to content
Patternfly Logo

Number input

Examples

Default

With unit

%


$

With unit and lower threshold reached

%

With unit and upper threshold reached

%

Disabled

%

Varying sizes







Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="Plus", aria-label="Minus"
.pf-c-button.pf-m-control
Provides an accessible name for the outer plus/minus buttons. Required
min
input[type="number"].pf-c-form-control
Provides an optional minimum value for the input.
max
input[type="number"].pf-c-form-control
Provides an optional maximum value for the input.

Usage

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

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 + 1px * 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 + 1px * 2) + 4 * 1ch)

View source on GitHub