Skip to Content
Patternfly Logo

Text input

Text input is used for entering a single line of text. Related design guidelines: Forms

ExamplesCSS Variables

Examples

Basic

Disabled

Read only

Invalid

Select text using ref

CSS Variables

--pf-c-form-control__select--arrow--Backgroundc_form_control__select_arrow_Background
#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--Backgroundc_form_control__select_Background
#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--BackgroundPositionc_form_control__select_BackgroundPosition
calc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize
0.875rem
--pf-c-form-control__select--BackgroundUrlc_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__select--invalid--Backgroundc_form_control__select_invalid_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) 0.5rem/1rem 1rem no-repeat,#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--PaddingRightc_form_control__select_invalid_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control__select--PaddingRightc_form_control__select_PaddingRight
1.5rem
--pf-c-form-control__select--success--Backgroundc_form_control__select_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' 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") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--success--PaddingRightc_form_control__select_success_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor
#ededed
--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor
#92d400
--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor
#ededed
--pf-c-form-control--BorderRadiusc_form_control_BorderRadius
0
--pf-c-form-control--BorderRightColorc_form_control_BorderRightColor
#ededed
--pf-c-form-control--BorderTopColorc_form_control_BorderTopColor
#ededed
--pf-c-form-control--BorderWidthc_form_control_BorderWidth
1px
--pf-c-form-control--Colorc_form_control_Color
#737679
--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor
#ededed
--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColor
transparent
--pf-c-form-control--disabled--Colorc_form_control_disabled_Color
#737679
--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor
#06c
--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth
2px
--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--FontSizec_form_control_FontSize
1rem
--pf-c-form-control--Heightc_form_control_Height
calc(1rem*1.5 + 1px*2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor
#06c
--pf-c-form-control--invalid--Backgroundc_form_control_invalid_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) 0.5rem/1rem 1rem no-repeat,#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize
1rem 1rem
--pf-c-form-control--invalid--BackgroundUrlc_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--invalid--BorderBottomColorc_form_control_invalid_BorderBottomColor
#c9190b
--pf-c-form-control--invalid--BorderBottomWidthc_form_control_invalid_BorderBottomWidth
2px
--pf-c-form-control--invalid--exclamation--Backgroundc_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) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight
2rem
--pf-c-form-control--LineHeightc_form_control_LineHeight
1.5
--pf-c-form-control--m-search--Backgroundc_form_control_m_search_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23737679' 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") 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--m-search--BackgroundPositionc_form_control_m_search_BackgroundPosition
0.5rem
--pf-c-form-control--m-search--BackgroundSizec_form_control_m_search_BackgroundSize
1rem 1rem
--pf-c-form-control--m-search--BackgroundUrlc_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='%23737679' 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--m-search--PaddingLeftc_form_control_m_search_PaddingLeft
2rem
--pf-c-form-control--PaddingBottomc_form_control_PaddingBottom
calc(0.375rem - 1px)
--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft
0.5rem
--pf-c-form-control--PaddingRightc_form_control_PaddingRight
calc(0.5rem + 3rem)
--pf-c-form-control--PaddingTopc_form_control_PaddingTop
calc(0.375rem - 1px)
--pf-c-form-control--placeholder--Colorc_form_control_placeholder_Color
#737679
--pf-c-form-control--readonly--focus--BackgroundColorc_form_control_readonly_focus_BackgroundColor
#ededed
--pf-c-form-control--readonly--focus--BorderBottomColorc_form_control_readonly_focus_BorderBottomColor
#737679
--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth
1px
--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottom
calc(0.375rem - 1px)
--pf-c-form-control--success--Backgroundc_form_control_success_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' 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") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff 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") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--success--BackgroundPositionc_form_control_success_BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--success--BackgroundSizec_form_control_success_BackgroundSize
1rem 1rem
--pf-c-form-control--success--BackgroundUrlc_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='%2392d400' 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--success--BorderBottomColorc_form_control_success_BorderBottomColor
#92d400
--pf-c-form-control--success--BorderBottomWidthc_form_control_success_BorderBottomWidth
2px
--pf-c-form-control--success--check--Backgroundc_form_control_success_check_Background
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2392d400' 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") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--success--PaddingBottomc_form_control_success_PaddingBottom
calc(0.375rem - 2px)
--pf-c-form-control--success--PaddingRightc_form_control_success_PaddingRight
2rem