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.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

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	Default	Description
aria-label	string	'Type to filter'	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
innerRef	React.RefObject<any>		A reference object to attach to the input box
onBlur	(event?: any) => void		Callback for when focus is lost on the input field
onChange	(value: string, event: React.FormEvent<HTMLInputElement>) => void	(): any => undefined	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
type	'text' \| 'date' \| 'datetime-local' \| 'email' \| 'month' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'time' \| 'url'	'text'	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


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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines