Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-label="Plus", aria-label="Minus" | .pf-v6-c-button.pf-m-control | Provides an accessible name for the outer plus/minus buttons. Required |
min | input[type="number"].pf-v6-c-form-control | Provides an optional minimum value for the input. |
max | input[type="number"].pf-v6-c-form-control | Provides an optional maximum value for the input. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-number-input | <div> | Initiates the number input component. |
.pf-v6-c-number-input__icon | <span> | Initiates the number input icon. |
.pf-v6-c-number-input__unit | <span> | Initiates the number input unit. |
.pf-m-status | .pf-v6-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-v6-c-number-input--c-form-control--width-chars | .pf-v6-c-number-input | Specifies the number of characters to show in the input. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input__icon--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input--c-form-control--width-base | calc(1rem * 2 + 1px * 2) | ||
| ||||
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input--c-form-control--width-icon | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input--c-form-control--width-chars | 4 | ||
| :where(:root, .pf-v6-c-number-input) | --pf-v6-c-number-input--c-form-control--Width | calc(
calc(
calc(1rem * 2 + 1px * 2) + 4 * 1ch
) + 2rem
) | ||
| ||||
