React

Text input

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

ExamplesPropsCSS Variables

Examples

Simple text input

Copied to clipboard

Text input (disabled)

Copied to clipboard

Text input (read-only)

Copied to clipboard

Text input (invalid)

Copied to clipboard

Props

TextInput Props

The TextInput component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the TextInput.
isRequiredboolfalseFlag to show if the input is required.
typeenum'text'Type that the input accepts.
valueunionundefinedValue of the input.
isValidbooltrueFlag to show if the input is valid or invalid.
isDisabledboolfalseFlag to show if the input is disabled.
onChangefunc() => undefinedA callback for when the input value changes.
isReadOnlyboolfalseFlag to show if the input is read only.
aria-labelcustomnullCustom flag to show that the input requires an associated id or aria-label.
anyAdditional props are spread to the container <input>

CSS Variables

--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor#ededed
--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor#c9190b
--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor#ededed
--pf-c-form-control--BorderRadiusc_form_control_BorderRadius0
--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_BorderWidth1px
--pf-c-form-control--Colorc_form_control_Color#72767b
--pf-c-form-control--FontSizec_form_control_FontSize1rem
--pf-c-form-control--Heightc_form_control_Heightcalc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--LineHeightc_form_control_LineHeight1.5
--pf-c-form-control--PaddingBottomc_form_control_PaddingBottomcalc(0.375rem - 1px)
--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft0.5rem
--pf-c-form-control--PaddingRightc_form_control_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--PaddingTopc_form_control_PaddingTopcalc(0.375rem - 1px)
--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_BackgroundPositioncalc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize0.875rem
--pf-c-form-control__select--BackgroundUrlc_form_control__select_BackgroundUrlurl("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--PaddingRightc_form_control__select_PaddingRight1.5rem
--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--invalid--Backgroundc_form_control__select_invalid_Backgroundurl("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_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor#ededed
--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColortransparent
--pf-c-form-control--disabled--Colorc_form_control_disabled_Color#72767b
--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor#06c
--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth2px
--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor#06c
--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Backgroundurl("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_BackgroundPositioncalc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize1rem 1rem
--pf-c-form-control--invalid--BackgroundUrlc_form_control_invalid_BackgroundUrlurl("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_BorderBottomWidth2px
--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight2rem
--pf-c-form-control--invalid--exclamation--Backgroundc_form_control_invalid_exclamation_Backgroundurl("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--placeholder--Colorc_form_control_placeholder_Color#72767b
--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#72767b
--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth1px
--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottomcalc(0.375rem - 1px)