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.
isDisabledbooleanfalseFlag to show if the input is disabled.
isReadOnlybooleanfalseFlag to show if the input is read only.
isRequiredbooleanfalseFlag to show if the input is required.
isValidbooleantrueFlag to show if the input is valid or invalid.
onChange(value: string, event: React.FormEvent<HTMLInputElement>) => void(): any => undefinedA callback for when the input value changes.
type'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url''text'Type that the input accepts.
valuestring | numberValue of the input.
aria-labelstringnull as stringAria-label. The input requires an associated id or aria-label.

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)