Examples
Icon sprite variants
Note: The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The isIconSprite variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
Props
TextArea
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Custom flag to show that the text area requires an associated id or aria-label. | |
| autoResize | boolean | Flag to modify height based on contents. | |
| className | string | Additional classes added to the text area. | |
| innerRef | React.RefObject<any> | A reference object to attach to the text area. | |
| isDisabled | boolean | Flag to show if the text area is disabled. | |
| isIconSprite | boolean | Use the external file instead of a data URI | |
| Deprecated: isReadOnly | boolean | Use readOnlyVariant instead. Flag to show if the text area is read only. | |
| isRequired | boolean | Flag to show if the text area is required. | |
| onChange | (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void | A callback for when the text area value changes. | |
| readOnlyVariant | 'default' | 'plain' | Read only variant. | |
| resizeOrientation | 'horizontal' | 'vertical' | 'both' | Sets the orientation to limit the resize to | |
| validated | 'success' | 'warning' | 'error' | 'default' | Value to indicate if the text area is modified to show that validation state. If set to success, text area will be modified to indicate valid state. If set to error, text area will be modified to indicate error state. | |
| value | string | number | Value of the text area. |
CSS variables
| .pf-c-form-control | --pf-global--Color--100 | #151515 | ||
| .pf-c-form-control | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-form-control | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-form-control | --pf-global--primary-color--100 | #06c | ||
| .pf-c-form-control | --pf-global--link--Color | #06c | ||
| .pf-c-form-control | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-form-control | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-form-control | --pf-c-form-control--Color | #151515 | ||
| .pf-c-form-control | --pf-c-form-control--FontSize | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--LineHeight | 1.5 | ||
| .pf-c-form-control | --pf-c-form-control--BorderWidth | 1px | ||
| .pf-c-form-control | --pf-c-form-control--BorderTopColor | #f0f0f0 | ||
| .pf-c-form-control | --pf-c-form-control--BorderRightColor | #f0f0f0 | ||
| .pf-c-form-control | --pf-c-form-control--BorderBottomColor | #8a8d90 | ||
| .pf-c-form-control | --pf-c-form-control--BorderLeftColor | #f0f0f0 | ||
| .pf-c-form-control | --pf-c-form-control--BorderRadius | 0 | ||
| .pf-c-form-control | --pf-c-form-control--BackgroundColor | #fff | ||
| .pf-c-form-control | --pf-c-form-control--Width | 100% | ||
| .pf-c-form-control | --pf-c-form-control--Height | calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px)) | ||
| .pf-c-form-control | --pf-c-form-control--inset--base | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--PaddingTop | calc(0.375rem - 1px) | ||
| .pf-c-form-control | --pf-c-form-control--PaddingBottom | calc(0.375rem - 1px) | ||
| .pf-c-form-control | --pf-c-form-control--PaddingRight | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--PaddingLeft | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--hover--BorderBottomColor | #06c | ||
| .pf-c-form-control | --pf-c-form-control--focus--BorderBottomWidth | 2px | ||
| .pf-c-form-control | --pf-c-form-control--focus--PaddingBottom | calc(0.375rem - 2px) | ||
| .pf-c-form-control | --pf-c-form-control--focus--BorderBottomColor | #06c | ||
| .pf-c-form-control | --pf-c-form-control--m-expanded--BorderBottomWidth | 2px | ||
| .pf-c-form-control | --pf-c-form-control--m-expanded--PaddingBottom | calc(0.375rem - 2px) | ||
| .pf-c-form-control | --pf-c-form-control--m-expanded--BorderBottomColor | #06c | ||
| .pf-c-form-control | --pf-c-form-control--placeholder--Color | #6a6e73 | ||
| .pf-c-form-control | --pf-c-form-control--placeholder--child--Color | #151515 | ||
| .pf-c-form-control | --pf-c-form-control--disabled--Color | #6a6e73 | ||
| .pf-c-form-control | --pf-c-form-control--disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-form-control | --pf-c-form-control--disabled--BorderColor | transparent | ||
| .pf-c-form-control | --pf-c-form-control--readonly--BackgroundColor | #f0f0f0 | ||
| .pf-c-form-control | --pf-c-form-control--readonly--hover--BorderBottomColor | #8a8d90 | ||
| .pf-c-form-control | --pf-c-form-control--readonly--focus--PaddingBottom | calc(0.375rem - 1px) | ||
| .pf-c-form-control | --pf-c-form-control--readonly--focus--BorderBottomWidth | 1px | ||
| .pf-c-form-control | --pf-c-form-control--readonly--focus--BorderBottomColor | #8a8d90 | ||
| .pf-c-form-control | --pf-c-form-control--readonly--m-plain--BackgroundColor | transparent | ||
| .pf-c-form-control | --pf-c-form-control--readonly--m-plain--inset--base | 0 | ||
| .pf-c-form-control | --pf-c-form-control--success--BorderBottomWidth | 2px | ||
| .pf-c-form-control | --pf-c-form-control--success--PaddingBottom | calc(0.375rem - 2px) | ||
| .pf-c-form-control | --pf-c-form-control--success--BorderBottomColor | #3e8635 | ||
| .pf-c-form-control | --pf-c-form-control--success--PaddingRight | 2rem | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundPositionX | calc(100% - 0.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundPositionY | center | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundPosition | calc(100% - 0.5rem) center | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundSizeX | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundSizeY | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundSize | 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--success--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BorderBottomWidth | 2px | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--PaddingBottom | calc(0.375rem - 2px) | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BorderBottomColor | #f0ab00 | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--PaddingRight | 2rem | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionX | calc(100% - calc(0.5rem - 0.0625rem)) | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionY | center | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPosition | calc(100% - calc(0.5rem - 0.0625rem)) center | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSizeX | 1.25rem | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSizeY | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSize | 1.25rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-warning--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BorderBottomWidth | 2px | ||
| .pf-c-form-control | --pf-c-form-control--invalid--PaddingBottom | calc(0.375rem - 2px) | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BorderBottomColor | #c9190b | ||
| .pf-c-form-control | --pf-c-form-control--invalid--PaddingRight | 2rem | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionX | calc(100% - 0.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionY | center | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundPosition | calc(100% - 0.5rem) center | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundSizeX | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundSizeY | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundSize | 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--invalid--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control--invalid--exclamation--Background | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat | ||
| .pf-c-form-control | --pf-c-form-control--invalid--Background | #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat | ||
| .pf-c-form-control | --pf-c-form-control--m-search--PaddingLeft | 2rem | ||
| .pf-c-form-control | --pf-c-form-control--m-search--BackgroundPosition | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--m-search--BackgroundSize | 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-search--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--BackgroundUrl | none | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--BackgroundPositionX | calc(100% - 0.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--BackgroundPositionY | center | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--BackgroundSizeX | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--BackgroundSizeY | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--icon--spacer | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--icon--BackgroundPositionX | calc(calc(100% - 0.5rem) - 0.5rem - 1rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundPosition | calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundSize | 1rem 1rem, 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E"), none | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundPosition | calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundSize | 1rem 1rem, 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundPosition | calc(100% - calc(0.5rem - 0.0625rem)) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | ||
| .pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundSize | 1.25rem 1rem, 1rem 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-calendar--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control--m-clock--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control__select--PaddingRight | calc(1.5rem + 1px + 1px) | ||
| .pf-c-form-control | --pf-c-form-control__select--PaddingLeft | calc(0.5rem - 1px) | ||
| .pf-c-form-control | --pf-c-form-control__select--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control | --pf-c-form-control__select--BackgroundSize | .625em | ||
| .pf-c-form-control | --pf-c-form-control__select--BackgroundPositionX | calc(100% - 1rem + 1px) | ||
| .pf-c-form-control | --pf-c-form-control__select--BackgroundPositionY | center | ||
| .pf-c-form-control | --pf-c-form-control__select--BackgroundPosition | calc(100% - 1rem + 1px) center | ||
| .pf-c-form-control | --pf-c-form-control__select--success--PaddingRight | 4rem | ||
| .pf-c-form-control | --pf-c-form-control__select--success--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | ||
| .pf-c-form-control | --pf-c-form-control__select--m-warning--PaddingRight | 4rem | ||
| .pf-c-form-control | --pf-c-form-control__select--m-warning--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem + 0.0625rem) | ||
| .pf-c-form-control | --pf-c-form-control__select--invalid--PaddingRight | 4rem | ||
| .pf-c-form-control | --pf-c-form-control__select--invalid--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--textarea--Width | 100% | ||
| .pf-c-form-control | --pf-c-form-control--textarea--Height | auto | ||
| .pf-c-form-control | --pf-c-form-control--textarea--success--BackgroundPositionY | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--textarea--m-warning--BackgroundPositionY | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--textarea--invalid--BackgroundPositionY | 0.5rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--success--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#success") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#warning") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#invalid") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#select") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#search") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#calendar") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#clock") | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--BackgroundSize | 1rem | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX | calc(100% - 1rem + 7px) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition | calc(100% - 1rem + 1px - 1.5rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition | calc(100% - 1rem - 1.5rem + 0.0625rem) | ||
| .pf-c-form-control | --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition | calc(100% - 1rem - 1.5rem) | ||
| .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):hover | --pf-c-form-control--BorderBottomColor | #8a8d90 | ||
| .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus | --pf-c-form-control--focus--PaddingBottom | calc(0.375rem - 1px) | ||
| .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus | --pf-c-form-control--focus--BorderBottomWidth | 1px | ||
| .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus | --pf-c-form-control--focus--BorderBottomColor | #8a8d90 | ||
| .pf-c-form-control[readonly].pf-m-plain | --pf-c-form-control--readonly--BackgroundColor | transparent | ||
| .pf-c-form-control[readonly].pf-m-plain | --pf-c-form-control--inset--base | 0 | ||
| .pf-c-form-control:hover | --pf-c-form-control--BorderBottomColor | #06c | ||
| .pf-c-form-control:focus | --pf-c-form-control--BorderBottomColor | #06c | ||
| .pf-c-form-control.pf-m-expanded | --pf-c-form-control--BorderBottomColor | #06c | ||
| .pf-c-form-control:disabled | --pf-c-form-control--BackgroundColor | #f0f0f0 | ||
| .pf-c-form-control[aria-invalid=true] | --pf-c-form-control--PaddingRight | 2rem | ||
| .pf-c-form-control[aria-invalid=true] | --pf-c-form-control--BorderBottomColor | #c9190b | ||
| .pf-c-form-control[aria-invalid=true].pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control.pf-m-success | --pf-c-form-control--PaddingRight | 2rem | ||
| .pf-c-form-control.pf-m-success | --pf-c-form-control--BorderBottomColor | #3e8635 | ||
| .pf-c-form-control.pf-m-success.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control.pf-m-warning | --pf-c-form-control--PaddingRight | 2rem | ||
| .pf-c-form-control.pf-m-warning | --pf-c-form-control--BorderBottomColor | #f0ab00 | ||
| .pf-c-form-control.pf-m-warning.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control.pf-m-search | --pf-c-form-control--PaddingLeft | 2rem | ||
| .pf-c-form-control.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | ||
| .pf-c-form-control.pf-m-icon.pf-m-calendar | --pf-c-form-control--m-icon--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control.pf-m-icon.pf-m-clock | --pf-c-form-control--m-icon--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--success--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#success") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--m-warning--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#warning") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--invalid--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#invalid") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#select") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--m-search--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#search") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--m-calendar--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#calendar") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control--m-clock--BackgroundUrl | url("../../assets/images/status-icon-sprite.svg#clock") | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--BackgroundSize | 1rem | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--BackgroundPositionX | calc(100% - 1rem + 7px) | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--success--BackgroundPosition | calc(100% - 1rem + 1px - 1.5rem) | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--m-warning--BackgroundPosition | calc(100% - 1rem - 1.5rem + 0.0625rem) | ||
| .pf-c-form-control.pf-m-icon-sprite | --pf-c-form-control__select--invalid--BackgroundPosition | calc(100% - 1rem - 1.5rem) | ||
| select.pf-c-form-control | --pf-c-form-control--PaddingRight | calc(1.5rem + 1px + 1px) | ||
| select.pf-c-form-control | --pf-c-form-control--PaddingLeft | calc(0.5rem - 1px) | ||
| select.pf-c-form-control[aria-invalid=true] | --pf-c-form-control--PaddingRight | 4rem | ||
| select.pf-c-form-control[aria-invalid=true] | --pf-c-form-control--invalid--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | ||
| select.pf-c-form-control.pf-m-success | --pf-c-form-control--PaddingRight | 4rem | ||
| select.pf-c-form-control.pf-m-success | --pf-c-form-control--success--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | ||
| select.pf-c-form-control.pf-m-warning | --pf-c-form-control--PaddingRight | 4rem | ||
| textarea.pf-c-form-control | --pf-c-form-control--success--BackgroundPositionY | 0.5rem | ||
| textarea.pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionY | 0.5rem | ||
| textarea.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionY | 0.5rem | ||
View source on GitHub
