Examples
Input
Note: In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with autocomplete="off" to avoid the problem. Otherwise, use helper text instead to ensure that the status will remain visible if the field is autocompleted.
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
id | .pf-v5-c-form-control > input,.pf-v5-c-form-control > select, or .pf-v5-c-form-control > textarea | Provides an id value that can be used with the for attribute on an associated <label> element to provide an accessible label for the form control element. |
aria-invalid="true" | .pf-v5-c-form-control > input,.pf-v5-c-form-control > select, or .pf-v5-c-form-control > textarea | Indicates that the form control is in the error state and applies error state styling. Use with .pf-m-error on the .pf-v5-c-form-control to ensure correct styling. |
aria-label="descriptive text" | .pf-v5-c-form-control > input,.pf-v5-c-form-control > select, or .pf-v5-c-form-control > textarea | Provides an accessible label for assistive technology. |
aria-expanded="true" | .pf-v5-c-form-control > input | Indicates that clicking in the form control has toggled something else to be expanded. Use with .pf-m-expanded on the .pf-v5-c-form-control to ensure correct styling. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-form-control | <span> | Initiates a container for an input, text area or select. For styling of checkboxes or radios see the checkbox component or radio component. Required |
.pf-v5-c-form-control__utilities | <span> | Initiates a container for elements like icons to be associated with the form control. |
.pf-v5-c-form-control__icon | <span> | Creates a container for an icon associated with a form control. |
.pf-v5-c-form-control__toggle-icon | <span> | Initiates a toggle icon for a form select. |
.pf-m-resize-vertical | .pf-v5-c-form-control | Modifies a form control element containing a text area so it can only be resized vertically. |
.pf-m-resize-horizontal | .pf-v5-c-form-control | Modifies a form control element containing a text area so it can only be resized horizontally. |
.pf-m-resize-both | .pf-v5-c-form-control | Modifies a .pf-v5-c-form-control element containing a text area so it resizes in both directions. |
.pf-m-icon | .pf-v5-c-form-control | Modifies a form control to allow for an icon. |
.pf-m-readonly | .pf-v5-c-form-control | Modifies a form control for a readonly input, text area, or select. |
.pf-m-disabled | .pf-v5-c-form-control | Modifies a form control for a disabled input, text area, or select. |
.pf-m-success | .pf-v5-c-form-control | Modifies a form control for the success state. |
.pf-m-warning | .pf-v5-c-form-control | Modifies a form control for the warning state. |
.pf-m-error | .pf-v5-c-form-control | Modifies a form control for the error (invalid) state. |
.pf-m-expanded | .pf-v5-c-form-control | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
.pf-m-placeholder | .pf-v5-c-form-control | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
.pf-m-plain | .pf-v5-c-form-control | Modifies a form control containing an <input> or <textarea> with a readonly attribute to be presented as normal text. |
.pf-m-status | .pf-v5-c-form-control__icon | Modifies a form control icon to show status. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-form-control | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-form-control | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-form-control | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-form-control | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--ColumnGap | 0.5rem | ||
--pf-v5-c-form-control--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Color | #151515 | ||
--pf-v5-c-form-control--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--FontSize | 1rem | ||
--pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--LineHeight | 1.5 | ||
--pf-v5-c-form-control--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Resize | none | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--OutlineOffset | -2px | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderTopWidth | 1px | ||
--pf-v5-c-form-control--before--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderRightWidth | 1px | ||
--pf-v5-c-form-control--before--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderBottomWidth | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderLeftWidth | 1px | ||
--pf-v5-c-form-control--before--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderBottomColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--before--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-form-control--before--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--BackgroundColor | #fff | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--Width | 100% | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--inset--base | 0.5rem | ||
--pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingBottom | 0.375rem | ||
--pf-v5-c-form-control--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control--PaddingLeft --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--hover--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--focus--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--focus--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-expanded--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--m-expanded--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-placeholder--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-placeholder--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-placeholder--child--Color | #151515 | ||
--pf-v5-c-form-control--m-placeholder--child--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled--after--BorderColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor | transparent | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--inset--base | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset | 0 | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-success--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--after--BorderBottomColor | #3e8635 | ||
--pf-v5-c-form-control--m-success--after--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-success--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-warning--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--after--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-form-control--m-warning--after--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-warning--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--m-error--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--after--BorderBottomColor | #c9190b | ||
--pf-v5-c-form-control--m-error--after--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--PaddingRight | 2rem | ||
--pf-v5-c-form-control--m-error--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error--icon--width | 1rem | ||
--pf-v5-c-form-control--m-error--icon--width --pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--m-icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--width | 1rem | ||
--pf-v5-c-form-control--m-icon--icon--width --pf-v5-c-form-control--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--spacer | 0.5rem | ||
--pf-v5-c-form-control--m-icon--icon--spacer --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-icon--icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--PaddingRight | 1.5rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control__select--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-success--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-success--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__select--m-error--m-status--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--m-error--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--textarea--Width | 100% | ||
--pf-v5-c-form-control--textarea--Width --pf-v5-c-form-control--Width 100% | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--textarea--Height | auto | ||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control__icon--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__icon--m-status--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-success__icon--m-status--Color | #3e8635 | ||
--pf-v5-c-form-control--m-success__icon--m-status--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-warning__icon--m-status--Color | #f0ab00 | ||
--pf-v5-c-form-control--m-warning__icon--m-status--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-error__icon--m-status--Color | #c9190b | ||
--pf-v5-c-form-control--m-error__icon--m-status--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--Gap | 0.5rem | ||
--pf-v5-c-form-control__utilities--Gap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--PaddingTop | 0.5rem | ||
--pf-v5-c-form-control__utilities--PaddingTop --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__utilities--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control__utilities--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingTop | 0.375rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingRight | 0.5rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingRight --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control__toggle-icon--PaddingLeft --pf-v5-c-form-control--inset--base --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control__toggle-icon--Color | #151515 | ||
--pf-v5-c-form-control__toggle-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-form-control | --pf-v5-c-form-control--m-disabled__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-disabled__toggle-icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-readonly | --pf-v5-c-form-control--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--hover--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--focus--after--BorderBottomWidth | 1px | ||
--pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v5-c-form-control--focus--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--m-readonly--BackgroundColor | transparent | ||
--pf-v5-c-form-control--m-readonly--BackgroundColor --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor transparent | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--inset--base | 0 | ||
--pf-v5-c-form-control--inset--base --pf-v5-c-form-control--m-readonly--m-plain--inset--base 0 | ||||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--before--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--after--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-readonly.pf-m-plain | --pf-v5-c-form-control--OutlineOffset | 0 | ||
--pf-v5-c-form-control--OutlineOffset --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset 0 | ||||
| .pf-v5-c-form-control:hover | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--hover--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control:focus-within | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--focus--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control:focus-within | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-expanded | --pf-v5-c-form-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-expanded--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-form-control.pf-m-expanded | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-form-control--BackgroundColor --pf-v5-c-form-control--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--Color | #6a6e73 | ||
--pf-v5-c-form-control--Color --pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--m-placeholder--Color | #6a6e73 | ||
--pf-v5-c-form-control--m-placeholder--Color --pf-v5-c-form-control--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control__toggle-icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__toggle-icon--Color --pf-v5-c-form-control--m-disabled__toggle-icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--before--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-disabled | --pf-v5-c-form-control--after--BorderStyle | none | ||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-error--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--after--BorderBottomColor | #c9190b | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-error--after--BorderBottomColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control__icon--m-status--Color | #c9190b | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-error__icon--m-status--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-error--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-error | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-error--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-error.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-success--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--after--BorderBottomColor | #3e8635 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-success--after--BorderBottomColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control__icon--m-status--Color | #3e8635 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-success__icon--m-status--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-success--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-success | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-success--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-success.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--PaddingRight | 2rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-warning--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--after--BorderBottomColor | #f0ab00 | ||
--pf-v5-c-form-control--after--BorderBottomColor --pf-v5-c-form-control--m-warning--after--BorderBottomColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control__icon--m-status--Color | #f0ab00 | ||
--pf-v5-c-form-control__icon--m-status--Color --pf-v5-c-form-control--m-warning__icon--m-status--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control__select--PaddingRight | 4rem | ||
--pf-v5-c-form-control__select--PaddingRight --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight --pf-v5-global--spacer--3xl $pf-v5-global--spacer--3xl pf-size-prem(64px) 4rem | ||||
| .pf-v5-c-form-control.pf-m-warning | --pf-v5-c-form-control--after--BorderBottomWidth | 2px | ||
--pf-v5-c-form-control--after--BorderBottomWidth --pf-v5-c-form-control--m-warning--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-form-control.pf-m-warning.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-error--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control.pf-m-icon | --pf-v5-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control--m-icon--PaddingRight calc(--pf-v5-c-form-control--inset--base + --pf-v5-c-form-control--m-icon--icon--width + --pf-v5-c-form-control--m-icon--icon--spacer) calc(--pf-v5-global--spacer--sm + --pf-v5-c-form-control--FontSize + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + --pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--sm + $pf-v5-global--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-form-control > select | --pf-v5-c-form-control--PaddingRight | 1.5rem | ||
--pf-v5-c-form-control--PaddingRight --pf-v5-c-form-control__select--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-form-control > select | --pf-v5-c-form-control--PaddingLeft | 0.5rem | ||
--pf-v5-c-form-control--PaddingLeft --pf-v5-c-form-control__select--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-form-control.pf-m-placeholder > select | --pf-v5-c-form-control--Color | #6a6e73 | ||
--pf-v5-c-form-control--Color --pf-v5-c-form-control--m-placeholder--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-form-control.pf-m-resize-vertical | --pf-v5-c-form-control--Resize | vertical | ||
| .pf-v5-c-form-control.pf-m-resize-horizontal | --pf-v5-c-form-control--Resize | horizontal | ||
| .pf-v5-c-form-control.pf-m-resize-both | --pf-v5-c-form-control--Resize | both | ||
| .pf-v5-c-form-control__icon.pf-m-status | --pf-v5-c-form-control__icon--Color | #6a6e73 | ||
--pf-v5-c-form-control__icon--Color --pf-v5-c-form-control__icon--m-status--Color --pf-v5-global--icon--Color--light $pf-v5-global--icon--Color--light $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub
