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
| .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
