Text input group

A text input group is a more flexible composable version of a text input. It enables consumers of PatternFly to build custom inputs for filtering and similar use cases by placing elements like icons, chips groups and buttons within a text input.

Examples

Basic

Disabled

Utilities and icon

Filters

chip one
chip two
chip three

Props

TextInputGroup

*required
Name	Type	Description
children	React.ReactNode	Content rendered inside the text input group
className	string	Additional classes applied to the text input group container
isDisabled	boolean	Adds disabled styling and a disabled context value which text input group main hooks into for the input itself
isPlain	boolean	Flag to indicate the toggle has no border or background

TextInputGroupMain

*required
Name	Type	Description
aria-activedescendantBeta	string	The id of the active element. Required if role has a value of "combobox", and focus should remain on the input.
aria-controlsBeta	string	The id of the element(s) controlled by the input. Required if role has a value of "combobox".
aria-label	string	Accessibility label for the input
children	React.ReactNode	Content rendered inside the text input group main div
className	string	Additional classes applied to the text input group main container
hint	string	Suggestion that will show up like a placeholder even with text in the input
icon	React.ReactNode	Icon to be shown on the left side of the text input group main container
inputId	string	The id of the input element
isExpandedBeta	boolean	Flag for whether an associated element controlled by the input is visible. Required if role has a value of "combobox".
name	string	Name for the input
onBlur	(event?: any) => void	Callback for when focus is lost on the input field
onChange	(event: React.FormEvent<HTMLInputElement>, value: string) => void	Callback for when there is a change in the input field
onFocus	(event?: any) => void	Callback for when the input field is focused
placeholder	string	Placeholder value for the input
roleBeta	string	Determines the accessible role of the input.
type	\| 'text' \| 'date' \| 'datetime-local' \| 'email' \| 'month' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'time' \| 'url'	Type that the input accepts.
value	string \| number	Value for the input

TextInputGroupUtilities

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the text input group utilities div
className	string		Additional classes applied to the text input group utilities container

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--BackgroundColor	#fff
--pf-v5-c-text-input-group--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--before--BorderWidth	1px
--pf-v5-c-text-input-group__text--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--before--BorderColor	#f0f0f0
--pf-v5-c-text-input-group__text--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--after--BorderBottomWidth	1px
--pf-v5-c-text-input-group__text--after--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--after--BorderBottomColor	#8a8d90
--pf-v5-c-text-input-group__text--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--hover__text--after--BorderBottomColor	#06c
--pf-v5-c-text-input-group--hover__text--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth	2px
--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor	#06c
--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft	0.5rem
--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft	2rem
--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__main--RowGap	0.25rem
--pf-v5-c-text-input-group__main--RowGap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__main--ColumnGap	0.5rem
--pf-v5-c-text-input-group__main--ColumnGap --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop	0.25rem
--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight	0.25rem
--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom	0.25rem
--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--PaddingTop	0.375rem
--pf-v5-c-text-input-group__text-input--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--PaddingRight	0.5rem
--pf-v5-c-text-input-group__text-input--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--PaddingBottom	0.375rem
--pf-v5-c-text-input-group__text-input--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--PaddingLeft	0.5rem
--pf-v5-c-text-input-group__text-input--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--MinWidth	12ch
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--m-hint--Color	#6a6e73
--pf-v5-c-text-input-group__text-input--m-hint--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--placeholder--Color	#6a6e73
--pf-v5-c-text-input-group__text-input--placeholder--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__text-input--BackgroundColor	transparent
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__icon--Left	0.5rem
--pf-v5-c-text-input-group__icon--Left --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__icon--Color	#151515
--pf-v5-c-text-input-group__icon--Color --pf-v5-global--icon--Color--dark $pf-v5-global--icon--Color--dark $pf-v5-color-black-900 #151515
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__icon--TranslateY	-50%
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__utilities--MarginRight	0.5rem
--pf-v5-c-text-input-group__utilities--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__utilities--MarginLeft	0.25rem
--pf-v5-c-text-input-group__utilities--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__utilities--child--MarginLeft	0.25rem
--pf-v5-c-text-input-group__utilities--child--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__utilities--c-button--PaddingRight	0.25rem
--pf-v5-c-text-input-group__utilities--c-button--PaddingRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft	0.25rem
--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--m-disabled--Color	#6a6e73
--pf-v5-c-text-input-group--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-text-input-group	--pf-v5-c-text-input-group--m-disabled--BackgroundColor	#f0f0f0
--pf-v5-c-text-input-group--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-text-input-group:hover	--pf-v5-c-text-input-group__text--after--BorderBottomColor	#06c
--pf-v5-c-text-input-group__text--after--BorderBottomColor --pf-v5-c-text-input-group--hover__text--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-text-input-group.pf-m-disabled	--pf-v5-c-text-input-group__text--before--BorderWidth	0
	.pf-v5-c-text-input-group.pf-m-disabled	--pf-v5-c-text-input-group__text--after--BorderBottomWidth	0
	.pf-v5-c-text-input-group.pf-m-disabled	--pf-v5-c-text-input-group--Color	#6a6e73
--pf-v5-c-text-input-group--Color --pf-v5-c-text-input-group--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-text-input-group.pf-m-disabled	--pf-v5-c-text-input-group__icon--Color	#6a6e73
--pf-v5-c-text-input-group__icon--Color --pf-v5-c-text-input-group--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-text-input-group.pf-m-disabled	--pf-v5-c-text-input-group--BackgroundColor	#f0f0f0
--pf-v5-c-text-input-group--BackgroundColor --pf-v5-c-text-input-group--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-text-input-group.pf-m-plain	--pf-v5-c-text-input-group--BackgroundColor	transparent
	.pf-v5-c-text-input-group__main.pf-m-icon	--pf-v5-c-text-input-group__text-input--PaddingLeft	2rem
--pf-v5-c-text-input-group__text-input--PaddingLeft --pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-v5-c-text-input-group__text:focus-within	--pf-v5-c-text-input-group__text--after--BorderBottomWidth	2px
--pf-v5-c-text-input-group__text--after--BorderBottomWidth --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px
	.pf-v5-c-text-input-group__text:focus-within	--pf-v5-c-text-input-group__text--after--BorderBottomColor	#06c
--pf-v5-c-text-input-group__text--after--BorderBottomColor --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-text-input-group__utilities .pf-v5-c-button	--pf-v5-c-button--PaddingRight	0.25rem
--pf-v5-c-button--PaddingRight --pf-v5-c-text-input-group__utilities--c-button--PaddingRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-text-input-group__utilities .pf-v5-c-button	--pf-v5-c-button--PaddingLeft	0.25rem
--pf-v5-c-button--PaddingLeft --pf-v5-c-text-input-group__utilities--c-button--PaddingLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem

View source on GitHub