PatternFly

Number input

A number input provides a quick and effective way for users to enter and modify a numeric value. Similar to input groups, number inputs combine 2 input types into 1 control: A text input field with buttons on either side. When combined, these elements allow users to input numeric values in a responsive and scalable way.

Examples

Default

With unit

%


$

With unit and lower threshold reached

%

With unit and upper threshold reached

%

Disabled

%

With status



Varying sizes







Documentation

Accessibility

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

Usage

Class
Applied to
Outcome
.pf-v5-c-number-input
<div>
Initiates the number input component.
.pf-v5-c-number-input__icon
<span>
Initiates the number input icon.
.pf-v5-c-number-input__unit
<span>
Initiates the number input unit.
.pf-m-status
.pf-v5-c-number-input
Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. Required if a status icon may be shown, even if the icon is not currently shown.
--pf-v5-c-number-input--c-form-control--width-chars
.pf-v5-c-number-input
Specifies the number of characters to show in the input.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-number-input--pf-v5-c-number-input__unit--c-input-group--MarginLeft
0.5rem
.pf-v5-c-number-input--pf-v5-c-number-input__icon--FontSize
0.75rem
.pf-v5-c-number-input--pf-v5-c-number-input--c-form-control--width-base
calc(0.5rem * 2 + 1px * 2)
.pf-v5-c-number-input--pf-v5-c-number-input--c-form-control--width-icon
0px
.pf-v5-c-number-input--pf-v5-c-number-input--m-status--c-form-control--width-icon
2rem
.pf-v5-c-number-input--pf-v5-c-number-input--c-form-control--width-chars
4
.pf-v5-c-number-input--pf-v5-c-number-input--c-form-control--Width
calc( calc( calc(0.5rem * 2 + 1px * 2) + 4 * 1ch ) + 0px )
.pf-v5-c-number-input.pf-m-status--pf-v5-c-number-input--c-form-control--width-icon
2rem

View source on GitHub