Patternfly Logo

Number input

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

Accessibility

AttributeApplied toOutcome
aria-label="Plus", aria-label="Minus".pf-c-button.pf-m-controlProvides an accessible name for the outer plus/minus buttons. Required
mininput[type="number"].pf-c-form-controlProvides an optional minimum value for the input.
maxinput[type="number"].pf-c-form-controlProvides an optional maximum value for the input.

Usage

ClassAppliedOutcome
.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-inputSpecifies the number of characters to show in the input.

CSS variables


View source on Github