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
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
View source on Github