PatternFly

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

Custom icon



Custom icon and invalid

Props

TextInput

*required
NameTypeDefaultDescription
aria-labelstringAria-label. The text input requires an associated id or aria-label.
classNamestringAdditional classes added to the text input.
customIconReact.ReactNodeCustom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon.
isDisabledbooleanFlag to show if the text input is disabled.
isExpandedbooleanFlag to apply expanded styling
isLeftTruncatedbooleanTrim text on left
isRequiredbooleanFlag indicating whether the input is required
onBlur(event?: any) => voidCallback function when text input is blurred (focus leaves)
onChange(event: React.FormEvent<HTMLInputElement>, value: string) => 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.
placeholderstringPlaceholder of the text input when there is no value
readOnlyVariant'plain' | 'default'Sets the input as readonly and determines the readonly styling.
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

SelectorVariableValue
.pf-v5-c-form-control--pf-v5-global--Color--100
#151515
.pf-v5-c-form-control--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-form-control--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-form-control--pf-v5-global--primary-color--100
#06c
.pf-v5-c-form-control--pf-v5-global--link--Color
#06c
.pf-v5-c-form-control--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-form-control--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-form-control--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-form-control--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-form-control--pf-v5-c-form-control--ColumnGap
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control--Color
#151515
.pf-v5-c-form-control--pf-v5-c-form-control--FontSize
1rem
.pf-v5-c-form-control--pf-v5-c-form-control--LineHeight
1.5
.pf-v5-c-form-control--pf-v5-c-form-control--Resize
none
.pf-v5-c-form-control--pf-v5-c-form-control--OutlineOffset
-2px
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderTopWidth
1px
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderRightWidth
1px
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderBottomWidth
0
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderLeftWidth
1px
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderTopColor
#f0f0f0
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderRightColor
#f0f0f0
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderBottomColor
transparent
.pf-v5-c-form-control--pf-v5-c-form-control--before--BorderLeftColor
#f0f0f0
.pf-v5-c-form-control--pf-v5-c-form-control--after--BorderBottomWidth
1px
.pf-v5-c-form-control--pf-v5-c-form-control--after--BorderBottomColor
#8a8d90
.pf-v5-c-form-control--pf-v5-c-form-control--BackgroundColor
#fff
.pf-v5-c-form-control--pf-v5-c-form-control--Width
100%
.pf-v5-c-form-control--pf-v5-c-form-control--inset--base
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control--PaddingTop
0.375rem
.pf-v5-c-form-control--pf-v5-c-form-control--PaddingBottom
0.375rem
.pf-v5-c-form-control--pf-v5-c-form-control--PaddingRight
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control--PaddingLeft
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control--hover--after--BorderBottomColor
#06c
.pf-v5-c-form-control--pf-v5-c-form-control--focus--after--BorderBottomWidth
2px
.pf-v5-c-form-control--pf-v5-c-form-control--focus--after--BorderBottomColor
#06c
.pf-v5-c-form-control--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth
2px
.pf-v5-c-form-control--pf-v5-c-form-control--m-expanded--after--BorderBottomColor
#06c
.pf-v5-c-form-control--pf-v5-c-form-control--m-placeholder--Color
#6a6e73
.pf-v5-c-form-control--pf-v5-c-form-control--m-placeholder--child--Color
#151515
.pf-v5-c-form-control--pf-v5-c-form-control--m-disabled--Color
#6a6e73
.pf-v5-c-form-control--pf-v5-c-form-control--m-disabled--BackgroundColor
#f0f0f0
.pf-v5-c-form-control--pf-v5-c-form-control--m-disabled--after--BorderColor
transparent
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--BackgroundColor
#f0f0f0
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor
#8a8d90
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth
1px
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor
#8a8d90
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor
transparent
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--m-plain--inset--base
0
.pf-v5-c-form-control--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset
0
.pf-v5-c-form-control--pf-v5-c-form-control--m-success--after--BorderBottomWidth
2px
.pf-v5-c-form-control--pf-v5-c-form-control--m-success--after--BorderBottomColor
#3e8635
.pf-v5-c-form-control--pf-v5-c-form-control--m-success--PaddingRight
2rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-warning--after--BorderBottomWidth
2px
.pf-v5-c-form-control--pf-v5-c-form-control--m-warning--after--BorderBottomColor
#f0ab00
.pf-v5-c-form-control--pf-v5-c-form-control--m-warning--PaddingRight
2rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-error--after--BorderBottomWidth
2px
.pf-v5-c-form-control--pf-v5-c-form-control--m-error--after--BorderBottomColor
#c9190b
.pf-v5-c-form-control--pf-v5-c-form-control--m-error--PaddingRight
2rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-error--icon--width
1rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-icon--PaddingRight
calc(0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control--pf-v5-c-form-control--m-icon--icon--width
1rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-icon--icon--spacer
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control--m-icon--icon--PaddingRight
calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control--pf-v5-c-form-control__select--PaddingRight
1.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__select--PaddingLeft
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__select--m-success--m-status--PaddingRight
4rem
.pf-v5-c-form-control--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight
4rem
.pf-v5-c-form-control--pf-v5-c-form-control__select--m-error--m-status--PaddingRight
4rem
.pf-v5-c-form-control--pf-v5-c-form-control--textarea--Width
100%
.pf-v5-c-form-control--pf-v5-c-form-control--textarea--Height
auto
.pf-v5-c-form-control--pf-v5-c-form-control__icon--PaddingTop
0.375rem
.pf-v5-c-form-control--pf-v5-c-form-control__icon--Color
#6a6e73
.pf-v5-c-form-control--pf-v5-c-form-control__icon--m-status--Color
#6a6e73
.pf-v5-c-form-control--pf-v5-c-form-control--m-success__icon--m-status--Color
#3e8635
.pf-v5-c-form-control--pf-v5-c-form-control--m-warning__icon--m-status--Color
#f0ab00
.pf-v5-c-form-control--pf-v5-c-form-control--m-error__icon--m-status--Color
#c9190b
.pf-v5-c-form-control--pf-v5-c-form-control__utilities--Gap
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__utilities--PaddingTop
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__utilities--PaddingRight
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__toggle-icon--PaddingTop
0.375rem
.pf-v5-c-form-control--pf-v5-c-form-control__toggle-icon--PaddingRight
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__toggle-icon--PaddingLeft
0.5rem
.pf-v5-c-form-control--pf-v5-c-form-control__toggle-icon--Color
#151515
.pf-v5-c-form-control--pf-v5-c-form-control--m-disabled__toggle-icon--Color
#6a6e73
.pf-v5-c-form-control.pf-m-readonly--pf-v5-c-form-control--BackgroundColor
#f0f0f0
.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v5-c-form-control--hover--after--BorderBottomColor
#8a8d90
.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v5-c-form-control--focus--after--BorderBottomWidth
1px
.pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error)--pf-v5-c-form-control--focus--after--BorderBottomColor
#8a8d90
.pf-v5-c-form-control.pf-m-readonly.pf-m-plain--pf-v5-c-form-control--m-readonly--BackgroundColor
transparent
.pf-v5-c-form-control.pf-m-readonly.pf-m-plain--pf-v5-c-form-control--inset--base
0
.pf-v5-c-form-control.pf-m-readonly.pf-m-plain--pf-v5-c-form-control--before--BorderStyle
none
.pf-v5-c-form-control.pf-m-readonly.pf-m-plain--pf-v5-c-form-control--after--BorderStyle
none
.pf-v5-c-form-control.pf-m-readonly.pf-m-plain--pf-v5-c-form-control--OutlineOffset
0
.pf-v5-c-form-control:hover--pf-v5-c-form-control--after--BorderBottomColor
#06c
.pf-v5-c-form-control:focus-within--pf-v5-c-form-control--after--BorderBottomColor
#06c
.pf-v5-c-form-control:focus-within--pf-v5-c-form-control--after--BorderBottomWidth
2px
.pf-v5-c-form-control.pf-m-expanded--pf-v5-c-form-control--after--BorderBottomColor
#06c
.pf-v5-c-form-control.pf-m-expanded--pf-v5-c-form-control--after--BorderBottomWidth
2px
.pf-v5-c-form-control.pf-m-disabled--pf-v5-c-form-control--BackgroundColor
#f0f0f0
.pf-v5-c-form-control.pf-m-disabled--pf-v5-c-form-control--Color
#6a6e73
.pf-v5-c-form-control.pf-m-disabled--pf-v5-c-form-control__toggle-icon--Color
#6a6e73
.pf-v5-c-form-control.pf-m-disabled--pf-v5-c-form-control--before--BorderStyle
none
.pf-v5-c-form-control.pf-m-disabled--pf-v5-c-form-control--after--BorderStyle
none
.pf-v5-c-form-control.pf-m-error--pf-v5-c-form-control--PaddingRight
2rem
.pf-v5-c-form-control.pf-m-error--pf-v5-c-form-control--after--BorderBottomColor
#c9190b
.pf-v5-c-form-control.pf-m-error--pf-v5-c-form-control__icon--m-status--Color
#c9190b
.pf-v5-c-form-control.pf-m-error--pf-v5-c-form-control__select--PaddingRight
4rem
.pf-v5-c-form-control.pf-m-error--pf-v5-c-form-control--after--BorderBottomWidth
2px
.pf-v5-c-form-control.pf-m-error.pf-m-icon--pf-v5-c-form-control--PaddingRight
calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control.pf-m-success--pf-v5-c-form-control--PaddingRight
2rem
.pf-v5-c-form-control.pf-m-success--pf-v5-c-form-control--after--BorderBottomColor
#3e8635
.pf-v5-c-form-control.pf-m-success--pf-v5-c-form-control__icon--m-status--Color
#3e8635
.pf-v5-c-form-control.pf-m-success--pf-v5-c-form-control__select--PaddingRight
4rem
.pf-v5-c-form-control.pf-m-success--pf-v5-c-form-control--after--BorderBottomWidth
2px
.pf-v5-c-form-control.pf-m-success.pf-m-icon--pf-v5-c-form-control--PaddingRight
calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control.pf-m-warning--pf-v5-c-form-control--PaddingRight
2rem
.pf-v5-c-form-control.pf-m-warning--pf-v5-c-form-control--after--BorderBottomColor
#f0ab00
.pf-v5-c-form-control.pf-m-warning--pf-v5-c-form-control__icon--m-status--Color
#f0ab00
.pf-v5-c-form-control.pf-m-warning--pf-v5-c-form-control__select--PaddingRight
4rem
.pf-v5-c-form-control.pf-m-warning--pf-v5-c-form-control--after--BorderBottomWidth
2px
.pf-v5-c-form-control.pf-m-warning.pf-m-icon--pf-v5-c-form-control--PaddingRight
calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control.pf-m-icon--pf-v5-c-form-control--PaddingRight
calc(0.5rem + 1rem + 0.5rem)
.pf-v5-c-form-control > select--pf-v5-c-form-control--PaddingRight
1.5rem
.pf-v5-c-form-control > select--pf-v5-c-form-control--PaddingLeft
0.5rem
.pf-v5-c-form-control.pf-m-placeholder > select--pf-v5-c-form-control--Color
#6a6e73
.pf-v5-c-form-control.pf-m-placeholder > select > *--pf-v5-c-form-control--Color
#151515
.pf-v5-c-form-control.pf-m-resize-vertical--pf-v5-c-form-control--Resize
vertical
.pf-v5-c-form-control.pf-m-resize-horizontal--pf-v5-c-form-control--Resize
horizontal
.pf-v5-c-form-control.pf-m-resize-both--pf-v5-c-form-control--Resize
both
.pf-v5-c-form-control__icon.pf-m-status--pf-v5-c-form-control__icon--Color
#6a6e73

View source on GitHub