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-v6-c-form-control > input,.pf-v6-c-form-control > select, or .pf-v6-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-v6-c-form-control > input,.pf-v6-c-form-control > select, or .pf-v6-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-v6-c-form-control to ensure correct styling. |
aria-label="descriptive text" | .pf-v6-c-form-control > input,.pf-v6-c-form-control > select, or .pf-v6-c-form-control > textarea | Provides an accessible label for assistive technology. |
aria-expanded="true" | .pf-v6-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-v6-c-form-control to ensure correct styling. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-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-v6-c-form-control__utilities | <span> | Initiates a container for elements like icons to be associated with the form control. |
.pf-v6-c-form-control__icon | <span> | Creates a container for an icon associated with a form control. |
.pf-v6-c-form-control__toggle-icon | <span> | Initiates a toggle icon for a form select. |
.pf-m-resize-vertical | .pf-v6-c-form-control | Modifies a form control element containing a text area so it can only be resized vertically. |
.pf-m-resize-horizontal | .pf-v6-c-form-control | Modifies a form control element containing a text area so it can only be resized horizontally. |
.pf-m-resize-both | .pf-v6-c-form-control | Modifies a .pf-v6-c-form-control element containing a text area so it resizes in both directions. |
.pf-m-icon | .pf-v6-c-form-control | Modifies a form control to allow for an icon. |
.pf-m-readonly | .pf-v6-c-form-control | Modifies a form control for a readonly input, text area, or select. |
.pf-m-disabled | .pf-v6-c-form-control | Modifies a form control for a disabled input, text area, or select. |
.pf-m-success | .pf-v6-c-form-control | Modifies a form control for the success state. |
.pf-m-warning | .pf-v6-c-form-control | Modifies a form control for the warning state. |
.pf-m-error | .pf-v6-c-form-control | Modifies a form control for the error (invalid) state. |
.pf-m-expanded | .pf-v6-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-v6-c-form-control | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
.pf-m-plain | .pf-v6-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-v6-c-form-control__icon | Modifies a form control icon to show status. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :root | --pf-v6-c-form-control--ColumnGap | 8px | ||
--pf-v6-c-form-control--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control--Color | #1f1f1f | ||
--pf-v6-c-form-control--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| :root | --pf-v6-c-form-control--FontSize | 14px | ||
--pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
| :root | --pf-v6-c-form-control--LineHeight | 1.5 | ||
--pf-v6-c-form-control--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5 | ||||
| :root | --pf-v6-c-form-control--Resize | none | ||
| :root | --pf-v6-c-form-control--OutlineOffset | -6px | ||
| :root | --pf-v6-c-form-control--BorderRadius | 6px | ||
--pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px | ||||
| :root | --pf-v6-c-form-control--before--BorderWidth | 1px | ||
--pf-v6-c-form-control--before--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--before--BorderColor | #c7c7c7 | ||
--pf-v6-c-form-control--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7 | ||||
| :root | --pf-v6-c-form-control--before--BorderRadius | 6px | ||
--pf-v6-c-form-control--before--BorderRadius --pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px | ||||
| :root | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--after--BorderColor | transparent | ||
| :root | --pf-v6-c-form-control--after--BorderRadius | 6px | ||
--pf-v6-c-form-control--after--BorderRadius --pf-v6-c-form-control--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px | ||||
| :root | --pf-v6-c-form-control--BackgroundColor | #fff | ||
--pf-v6-c-form-control--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #fff | ||||
| :root | --pf-v6-c-form-control--Width | 100% | ||
| :root | --pf-v6-c-form-control--inset--base | 16px | ||
--pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control--PaddingTop | 8px | ||
--pf-v6-c-form-control--PaddingTop --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control--PaddingBottom | 8px | ||
--pf-v6-c-form-control--PaddingBottom --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control--PaddingRight | 16px | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control--PaddingLeft | 16px | ||
--pf-v6-c-form-control--PaddingLeft --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control--hover--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--hover--after--BorderWidth --pf-t--global--border--width--control--hover --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--hover--after--BorderColor | #4394e5 | ||
--pf-v6-c-form-control--hover--after--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5 | ||||
| :root | --pf-v6-c-form-control--focus--after--BorderWidth | 2px | ||
--pf-v6-c-form-control--focus--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px | ||||
| :root | --pf-v6-c-form-control--focus--after--BorderColor | #06c | ||
--pf-v6-c-form-control--focus--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #06c | ||||
| :root | --pf-v6-c-form-control--m-expanded--after--BorderWidth | 2px | ||
--pf-v6-c-form-control--m-expanded--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px | ||||
| :root | --pf-v6-c-form-control--m-expanded--after--BorderColor | #06c | ||
--pf-v6-c-form-control--m-expanded--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #06c | ||||
| :root | --pf-v6-c-form-control--m-placeholder--Color | #4d4d4d | ||
--pf-v6-c-form-control--m-placeholder--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d | ||||
| :root | --pf-v6-c-form-control--m-placeholder--child--Color | #1f1f1f | ||
--pf-v6-c-form-control--m-placeholder--child--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| :root | --pf-v6-c-form-control--m-disabled--Color | #4d4d4d | ||
--pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d | ||||
| :root | --pf-v6-c-form-control--m-disabled--BackgroundColor | #c7c7c7 | ||
--pf-v6-c-form-control--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7 | ||||
| :root | --pf-v6-c-form-control--m-disabled--after--BorderColor | transparent | ||
| :root | --pf-v6-c-form-control--m-readonly--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-form-control--m-readonly--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
| :root | --pf-v6-c-form-control--m-readonly--BorderColor | transparent | ||
| :root | --pf-v6-c-form-control--m-readonly--hover--after--BorderColor | revert | ||
| :root | --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth | 2px | ||
--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px | ||||
| :root | --pf-v6-c-form-control--m-readonly--focus--after--BorderColor | #06c | ||
--pf-v6-c-form-control--m-readonly--focus--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #06c | ||||
| :root | --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor | transparent | ||
| :root | --pf-v6-c-form-control--m-readonly--m-plain--inset--base | 0 | ||
| :root | --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset | 0 | ||
| :root | --pf-v6-c-form-control--m-success--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--m-success--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--m-success--after--BorderColor | #3d7317 | ||
--pf-v6-c-form-control--m-success--after--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317 | ||||
| :root | --pf-v6-c-form-control--m-success--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--m-success--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| :root | --pf-v6-c-form-control--m-warning--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--m-warning--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--m-warning--after--BorderColor | #dca614 | ||
--pf-v6-c-form-control--m-warning--after--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614 | ||||
| :root | --pf-v6-c-form-control--m-warning--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--m-warning--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| :root | --pf-v6-c-form-control--m-error--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--m-error--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| :root | --pf-v6-c-form-control--m-error--after--BorderColor | #b1380b | ||
--pf-v6-c-form-control--m-error--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b | ||||
| :root | --pf-v6-c-form-control--m-error--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--m-error--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| :root | --pf-v6-c-form-control--m-error--icon--width | 14px | ||
--pf-v6-c-form-control--m-error--icon--width --pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
| :root | --pf-v6-c-form-control--m-icon--PaddingRight | calc(16px + 14px + 8px) | ||
--pf-v6-c-form-control--m-icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px) | ||||
| :root | --pf-v6-c-form-control--m-icon--icon--width | 14px | ||
--pf-v6-c-form-control--m-icon--icon--width --pf-v6-c-form-control--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 14px | ||||
| :root | --pf-v6-c-form-control--m-icon--icon--spacer | 8px | ||
--pf-v6-c-form-control--m-icon--icon--spacer --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control--m-icon--icon--PaddingRight | calc(16px + 14px + 8px + 14px + 8px) | ||
--pf-v6-c-form-control--m-icon--icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px + 14px + 8px) | ||||
| :root | --pf-v6-c-form-control__select--PaddingRight | 16px | ||
--pf-v6-c-form-control__select--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__select--PaddingLeft | 16px | ||
--pf-v6-c-form-control__select--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__select--m-success--m-status--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--m-success--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| :root | --pf-v6-c-form-control__select--m-warning--m-status--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--m-warning--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| :root | --pf-v6-c-form-control__select--m-error--m-status--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--m-error--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| :root | --pf-v6-c-form-control--textarea--Width | 100% | ||
--pf-v6-c-form-control--textarea--Width --pf-v6-c-form-control--Width 100% | ||||
| :root | --pf-v6-c-form-control--textarea--Height | auto | ||
| :root | --pf-v6-c-form-control__icon--PaddingTop | 8px | ||
--pf-v6-c-form-control__icon--PaddingTop --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control__icon--Color | #1f1f1f | ||
--pf-v6-c-form-control__icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| :root | --pf-v6-c-form-control__icon--m-status--Color | #1f1f1f | ||
--pf-v6-c-form-control__icon--m-status--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| :root | --pf-v6-c-form-control--m-success__icon--m-status--Color | #3d7317 | ||
--pf-v6-c-form-control--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317 | ||||
| :root | --pf-v6-c-form-control--m-warning__icon--m-status--Color | #dca614 | ||
--pf-v6-c-form-control--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614 | ||||
| :root | --pf-v6-c-form-control--m-error__icon--m-status--Color | #b1380b | ||
--pf-v6-c-form-control--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b | ||||
| :root | --pf-v6-c-form-control__utilities--Gap | 8px | ||
--pf-v6-c-form-control__utilities--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control__utilities--PaddingTop | 16px | ||
--pf-v6-c-form-control__utilities--PaddingTop --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__utilities--PaddingRight | 16px | ||
--pf-v6-c-form-control__utilities--PaddingRight --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__toggle-icon--PaddingTop | 8px | ||
--pf-v6-c-form-control__toggle-icon--PaddingTop --pf-t--global--spacer--sm --pf-t--global--spacer--200 8px | ||||
| :root | --pf-v6-c-form-control__toggle-icon--PaddingRight | 16px | ||
--pf-v6-c-form-control__toggle-icon--PaddingRight --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__toggle-icon--PaddingLeft | 16px | ||
--pf-v6-c-form-control__toggle-icon--PaddingLeft --pf-v6-c-form-control--inset--base --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| :root | --pf-v6-c-form-control__toggle-icon--Color | #1f1f1f | ||
--pf-v6-c-form-control__toggle-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| :root | --pf-v6-c-form-control--m-disabled__toggle-icon--Color | #a3a3a3 | ||
--pf-v6-c-form-control--m-disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
| .pf-v6-c-form-control.pf-m-readonly | --pf-v6-c-form-control--BackgroundColor | #f2f2f2 | ||
--pf-v6-c-form-control--BackgroundColor --pf-v6-c-form-control--m-readonly--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2 | ||||
| .pf-v6-c-form-control.pf-m-readonly | --pf-v6-c-form-control--BorderColor | transparent | ||
--pf-v6-c-form-control--BorderColor --pf-v6-c-form-control--m-readonly--BorderColor transparent | ||||
| .pf-v6-c-form-control.pf-m-readonly:hover | --pf-v6-c-form-control--hover--after--BorderColor | revert | ||
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-readonly--hover--after--BorderColor revert | ||||
| .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v6-c-form-control--hover--after--BorderColor | revert | ||
--pf-v6-c-form-control--hover--after--BorderColor --pf-v6-c-form-control--m-readonly--hover--after--BorderColor revert | ||||
| .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v6-c-form-control--focus--after--BorderWidth | 2px | ||
--pf-v6-c-form-control--focus--after--BorderWidth --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px | ||||
| .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v6-c-form-control--focus--after--BorderColor | #06c | ||
--pf-v6-c-form-control--focus--after--BorderColor --pf-v6-c-form-control--m-readonly--focus--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #06c | ||||
| .pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--m-readonly--BackgroundColor | transparent | ||
--pf-v6-c-form-control--m-readonly--BackgroundColor --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor transparent | ||||
| .pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--inset--base | 0 | ||
--pf-v6-c-form-control--inset--base --pf-v6-c-form-control--m-readonly--m-plain--inset--base 0 | ||||
| .pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--before--BorderStyle | none | ||
| .pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--after--BorderStyle | none | ||
| .pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--OutlineOffset | 0 | ||
--pf-v6-c-form-control--OutlineOffset --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset 0 | ||||
| .pf-v6-c-form-control:hover | --pf-v6-c-form-control--after--BorderColor | #4394e5 | ||
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--hover--after--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5 | ||||
| .pf-v6-c-form-control:hover | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--hover--after--BorderWidth --pf-t--global--border--width--control--hover --pf-t--global--border--width--100 1px | ||||
| .pf-v6-c-form-control.pf-m-expanded | --pf-v6-c-form-control--after--BorderColor | #06c | ||
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-expanded--after--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #06c | ||||
| .pf-v6-c-form-control.pf-m-expanded | --pf-v6-c-form-control--after--BorderWidth | 2px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-expanded--after--BorderWidth --pf-t--global--border--width--control--clicked --pf-t--global--border--width--200 2px | ||||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--BackgroundColor | #c7c7c7 | ||
--pf-v6-c-form-control--BackgroundColor --pf-v6-c-form-control--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7 | ||||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--Color | #4d4d4d | ||
--pf-v6-c-form-control--Color --pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d | ||||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--m-placeholder--Color | #4d4d4d | ||
--pf-v6-c-form-control--m-placeholder--Color --pf-v6-c-form-control--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d | ||||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control__toggle-icon--Color | #a3a3a3 | ||
--pf-v6-c-form-control__toggle-icon--Color --pf-v6-c-form-control--m-disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3 | ||||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--before--BorderStyle | none | ||
| .pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--after--BorderStyle | none | ||
| .pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-error--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--after--BorderColor | #b1380b | ||
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-error--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b | ||||
| .pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control__icon--m-status--Color | #b1380b | ||
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b | ||||
| .pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control__select--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--PaddingRight --pf-v6-c-form-control__select--m-error--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| .pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-error--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| .pf-v6-c-form-control.pf-m-error.pf-m-icon | --pf-v6-c-form-control--PaddingRight | calc(16px + 14px + 8px + 14px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-icon--icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px + 14px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-success--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--after--BorderColor | #3d7317 | ||
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-success--after--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317 | ||||
| .pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control__icon--m-status--Color | #3d7317 | ||
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317 | ||||
| .pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control__select--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--PaddingRight --pf-v6-c-form-control__select--m-success--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| .pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-success--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| .pf-v6-c-form-control.pf-m-success.pf-m-icon | --pf-v6-c-form-control--PaddingRight | calc(16px + 14px + 8px + 14px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-icon--icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px + 14px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--PaddingRight | calc(32px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-warning--PaddingRight calc(--pf-t--global--spacer--xl + --pf-v6-c-form-control--ColumnGap) calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--sm) calc(32px + --pf-t--global--spacer--200) calc(32px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--after--BorderColor | #dca614 | ||
--pf-v6-c-form-control--after--BorderColor --pf-v6-c-form-control--m-warning--after--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614 | ||||
| .pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control__icon--m-status--Color | #dca614 | ||
--pf-v6-c-form-control__icon--m-status--Color --pf-v6-c-form-control--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614 | ||||
| .pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control__select--PaddingRight | 64px | ||
--pf-v6-c-form-control__select--PaddingRight --pf-v6-c-form-control__select--m-warning--m-status--PaddingRight --pf-t--global--spacer--3xl --pf-t--global--spacer--700 64px | ||||
| .pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
--pf-v6-c-form-control--after--BorderWidth --pf-v6-c-form-control--m-warning--after--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px | ||||
| .pf-v6-c-form-control.pf-m-warning.pf-m-icon | --pf-v6-c-form-control--PaddingRight | calc(16px + 14px + 8px + 14px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-icon--icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-error--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px + 14px + 8px) | ||||
| .pf-v6-c-form-control.pf-m-icon | --pf-v6-c-form-control--PaddingRight | calc(16px + 14px + 8px) | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control--m-icon--PaddingRight calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--m-icon--icon--width + --pf-v6-c-form-control--m-icon--icon--spacer) calc(--pf-t--global--spacer--md + --pf-v6-c-form-control--FontSize + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(16px + --pf-t--global--font--size--sm + 8px) calc(16px + --pf-t--global--font--size--200 + 8px) calc(16px + 14px + 8px) | ||||
| .pf-v6-c-form-control > select | --pf-v6-c-form-control--PaddingRight | 16px | ||
--pf-v6-c-form-control--PaddingRight --pf-v6-c-form-control__select--PaddingRight --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| .pf-v6-c-form-control > select | --pf-v6-c-form-control--PaddingLeft | 16px | ||
--pf-v6-c-form-control--PaddingLeft --pf-v6-c-form-control__select--PaddingLeft --pf-t--global--spacer--md --pf-t--global--spacer--300 16px | ||||
| .pf-v6-c-form-control.pf-m-placeholder > select | --pf-v6-c-form-control--Color | #4d4d4d | ||
--pf-v6-c-form-control--Color --pf-v6-c-form-control--m-placeholder--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d | ||||
| .pf-v6-c-form-control.pf-m-resize-vertical | --pf-v6-c-form-control--Resize | vertical | ||
| .pf-v6-c-form-control.pf-m-resize-horizontal | --pf-v6-c-form-control--Resize | horizontal | ||
| .pf-v6-c-form-control.pf-m-resize-both | --pf-v6-c-form-control--Resize | both | ||
| .pf-v6-c-form-control__icon.pf-m-status | --pf-v6-c-form-control__icon--Color | #1f1f1f | ||
--pf-v6-c-form-control__icon--Color --pf-v6-c-form-control__icon--m-status--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f | ||||
| select ~ .pf-v6-c-form-control__utilities | --pf-v6-c-form-control__utilities--PaddingRight | 0 | ||
View source on GitHub
