Skip to content
PatternFly logo

Text input

A text input is used to gather free-form text from a user.

Examples

Basic

Disabled

Truncated on Left

Read only

Invalid

Select text using ref

Icon variants





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

TextInput

*required
NameTypeDefaultDescription
aria-labelstringAria-label. The text input requires an associated id or aria-label.
classNamestringAdditional classes added to the text input.
customIconDimensionsstringDimensions for the custom icon set as the text input's background-size
customIconUrlstringCustom icon url to set as the text input's background-image
iconVariant'calendar' | 'clock' | 'search'icon variant
innerRefReact.RefObject<any>A reference object to attach to the text input box.
isDisabledbooleanFlag to show if the text input is disabled.
isIconSpritebooleanUse the external file instead of a data URI
isLeftTruncatedbooleanTrim text on left
Deprecated: isReadOnlybooleanUse readOnlyVariant instead. Flag to show if the text input is read only.
isRequiredboolean
onBlur(event?: any) => voidCallback function when text input is blurred (focus leaves)
onChange(value: string, event: React.FormEvent<HTMLInputElement>) => voidA callback for when the text input value changes.
onFocus(event?: any) => voidCallback function when text input is focused
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
readOnlyVariant'plain' | 'default'Read only variant.
type'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url'Type that the text input accepts.
validated'success' | 'warning' | 'error' | 'default'Value to indicate if the text input is modified to show that validation state. If set to success, text input will be modified to indicate valid state. If set to error, text input will be modified to indicate error state.
valuestring | numberValue of the text input.

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines