Text input group

A text input group is a more custom, flexible, and composable version of a text input that includes elements like icons and buttons.

Examples

Basic text input group

A basic text input group updates its contents as users enter text.

Disabled text input group

To prevent users from making edits to a text input group, you can disable it using isDisabled.

With icon and utilities

To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to icon within <TextInputGroupMain>.

You can also add additional actions or utilities via <TextInputGroupUtilities>. The following example includes a clear button that allows users to remove their previous input.

With validation

You can add a validation status to a <TextInputGroup> by passing the validated property with a value of either "success", "warning", or "error".

With filters

When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a <LabelGroup> to <TextInputGroupMain>, with all of the labels that a user has selected. Users can interact with these labels as needed.

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
validated	'success' \| 'warning' \| 'error'	Status variant of the text input group.

TextInputGroupMain

*required
Name	Type	Description
aria-activedescendant	string	The id of the active element. Required if role has a value of "combobox", and focus should remain on the input.
aria-controls	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
isExpanded	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
role	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-v6-c-text-input-group	--pf-v6-c-text-input-group--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-text-input-group--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-text-input-group--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-success--BorderColor	(In light theme) #3d7317
--pf-v6-c-text-input-group--m-success--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-warning--BorderColor	(In light theme) #dca614
--pf-v6-c-text-input-group--m-warning--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-error--BorderColor	(In light theme) #b1380b
--pf-v6-c-text-input-group--m-error--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--BorderWidth	1px
--pf-v6-c-text-input-group--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__LineHeight	1.5
--pf-v6-c-text-input-group__LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__FontSize	0.875rem
--pf-v6-c-text-input-group__FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-hover--BorderColor	(In light theme) #4394e5
--pf-v6-c-text-input-group--m-hover--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-hover--m-success--BorderColor	(In light theme) #204d00
--pf-v6-c-text-input-group--m-hover--m-success--BorderColor --pf-t--global--border--color--status--success--hover --pf-t--global--color--status--success--hover --pf-t--global--color--status--success--200 --pf-t--color--green--70 #204d00
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor	(In light theme) #b98412
--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor --pf-t--global--border--color--status--warning--hover --pf-t--global--color--status--warning--300 --pf-t--color--yellow--50 #b98412
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-hover--m-error--BorderColor	(In light theme) #731f00
--pf-v6-c-text-input-group--m-hover--m-error--BorderColor --pf-t--global--border--color--status--danger--hover --pf-t--global--color--status--danger--hover --pf-t--global--color--status--danger--200 --pf-t--color--red-orange--70 #731f00
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart	calc(0.5rem / 2)
--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart calc(--pf-t--global--spacer--control--horizontal--plain / 2) calc(--pf-t--global--spacer--sm / 2) calc(--pf-t--global--spacer--200 / 2) calc(0.5rem / 2)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart	calc(1rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--md + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(1rem + --pf-t--global--font--size--sm + 0.5rem) calc(1rem + --pf-t--global--font--size--200 + 0.5rem) calc(1rem + 0.875rem + 0.5rem)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd	calc(1rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--md + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(1rem + --pf-t--global--font--size--sm + 0.5rem) calc(1rem + --pf-t--global--font--size--200 + 0.5rem) calc(1rem + 0.875rem + 0.5rem)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd	calc(0.5rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd calc(--pf-t--global--spacer--sm + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--200 + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(0.5rem + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(0.5rem + --pf-t--global--font--size--sm + 0.5rem) calc(0.5rem + --pf-t--global--font--size--200 + 0.5rem) calc(0.5rem + 0.875rem + 0.5rem)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--RowGap	0.25rem
--pf-v6-c-text-input-group__main--RowGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--ColumnGap	0.25rem
--pf-v6-c-text-input-group__main--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text--BorderRadius--base	6px
--pf-v6-c-text-input-group__text--BorderRadius--base --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text--BorderStartStartRadius	6px
--pf-v6-c-text-input-group__text--BorderStartStartRadius --pf-v6-c-text-input-group__text--BorderRadius--base --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text--BorderStartEndRadius	6px
--pf-v6-c-text-input-group__text--BorderStartEndRadius --pf-v6-c-text-input-group__text--BorderRadius--base --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text--BorderEndEndRadius	6px
--pf-v6-c-text-input-group__text--BorderEndEndRadius --pf-v6-c-text-input-group__text--BorderRadius--base --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text--BorderEndStartRadius	6px
--pf-v6-c-text-input-group__text--BorderEndStartRadius --pf-v6-c-text-input-group__text--BorderRadius--base --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart	calc(0.5rem / 2)
--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart calc(--pf-t--global--spacer--control--vertical--default / 2) calc(--pf-t--global--spacer--sm / 2) calc(--pf-t--global--spacer--200 / 2) calc(0.5rem / 2)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd	calc(0.5rem / 2)
--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd calc(--pf-t--global--spacer--control--horizontal--plain / 2) calc(--pf-t--global--spacer--sm / 2) calc(--pf-t--global--spacer--200 / 2) calc(0.5rem / 2)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd	calc(0.5rem / 2)
--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd calc(--pf-t--global--spacer--control--vertical--default / 2) calc(--pf-t--global--spacer--sm / 2) calc(--pf-t--global--spacer--200 / 2) calc(0.5rem / 2)
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--PaddingBlockStart	0.5rem
--pf-v6-c-text-input-group__text-input--PaddingBlockStart --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--PaddingInlineEnd	1rem
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--PaddingBlockEnd	0.5rem
--pf-v6-c-text-input-group__text-input--PaddingBlockEnd --pf-t--global--spacer--control--vertical--default --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--PaddingInlineStart	1rem
--pf-v6-c-text-input-group__text-input--PaddingInlineStart --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--MinWidth	12ch
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--m-hint--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group__text-input--m-hint--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--placeholder--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group__text-input--placeholder--Color --pf-t--global--text--color--placeholder --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--BackgroundColor	transparent
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__text-input--OutlineOffset	-6px
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--FontSize	0.875rem
--pf-v6-c-text-input-group__icon--FontSize --pf-t--global--icon--size--font--body--default --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--InsetInlineStart	1rem
--pf-v6-c-text-input-group__icon--InsetInlineStart --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd	1rem
--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd --pf-t--global--spacer--control--horizontal--default --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd	0.5rem
--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--Color	(In light theme) #1f1f1f
--pf-v6-c-text-input-group__icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-disabled__icon--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group--m-disabled__icon--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--m-status--Color	(In light theme) #1f1f1f
--pf-v6-c-text-input-group__icon--m-status--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color	(In light theme) #3d7317
--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color	(In light theme) #dca614
--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color	(In light theme) #b1380b
--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__icon--TranslateY	-50%
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group__utilities--child--MarginInlineStart	0.25rem
--pf-v6-c-text-input-group__utilities--child--MarginInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group	--pf-v6-c-text-input-group--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-text-input-group--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-text-input-group.pf-m-disabled	--pf-v6-c-text-input-group--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group--Color --pf-v6-c-text-input-group--m-disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group.pf-m-disabled	--pf-v6-c-text-input-group__icon--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group__icon--Color --pf-v6-c-text-input-group--m-disabled__icon--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group.pf-m-disabled	--pf-v6-c-text-input-group__icon--m-status--Color	(In light theme) #4d4d4d
--pf-v6-c-text-input-group__icon--m-status--Color --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-text-input-group.pf-m-disabled	--pf-v6-c-text-input-group--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-text-input-group--BackgroundColor --pf-v6-c-text-input-group--m-disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-text-input-group.pf-m-plain	--pf-v6-c-text-input-group--BackgroundColor	transparent
	.pf-v6-c-text-input-group.pf-m-success	--pf-v6-c-text-input-group--BorderColor	(In light theme) #3d7317
--pf-v6-c-text-input-group--BorderColor --pf-v6-c-text-input-group--m-success--BorderColor --pf-t--global--border--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-text-input-group.pf-m-success	--pf-v6-c-text-input-group--m-hover--BorderColor	(In light theme) #204d00
--pf-v6-c-text-input-group--m-hover--BorderColor --pf-v6-c-text-input-group--m-hover--m-success--BorderColor --pf-t--global--border--color--status--success--hover --pf-t--global--color--status--success--hover --pf-t--global--color--status--success--200 --pf-t--color--green--70 #204d00
	.pf-v6-c-text-input-group.pf-m-success	--pf-v6-c-text-input-group__icon--m-status--Color	(In light theme) #3d7317
--pf-v6-c-text-input-group__icon--m-status--Color --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-text-input-group.pf-m-warning	--pf-v6-c-text-input-group--BorderColor	(In light theme) #dca614
--pf-v6-c-text-input-group--BorderColor --pf-v6-c-text-input-group--m-warning--BorderColor --pf-t--global--border--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-text-input-group.pf-m-warning	--pf-v6-c-text-input-group--m-hover--BorderColor	(In light theme) #b98412
--pf-v6-c-text-input-group--m-hover--BorderColor --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor --pf-t--global--border--color--status--warning--hover --pf-t--global--color--status--warning--300 --pf-t--color--yellow--50 #b98412
	.pf-v6-c-text-input-group.pf-m-warning	--pf-v6-c-text-input-group__icon--m-status--Color	(In light theme) #dca614
--pf-v6-c-text-input-group__icon--m-status--Color --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-text-input-group.pf-m-error	--pf-v6-c-text-input-group--BorderColor	(In light theme) #b1380b
--pf-v6-c-text-input-group--BorderColor --pf-v6-c-text-input-group--m-error--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-text-input-group.pf-m-error	--pf-v6-c-text-input-group--m-hover--BorderColor	(In light theme) #731f00
--pf-v6-c-text-input-group--m-hover--BorderColor --pf-v6-c-text-input-group--m-hover--m-error--BorderColor --pf-t--global--border--color--status--danger--hover --pf-t--global--color--status--danger--hover --pf-t--global--color--status--danger--200 --pf-t--color--red-orange--70 #731f00
	.pf-v6-c-text-input-group.pf-m-error	--pf-v6-c-text-input-group__icon--m-status--Color	(In light theme) #b1380b
--pf-v6-c-text-input-group__icon--m-status--Color --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-text-input-group:hover	--pf-v6-c-text-input-group--BorderColor	(In light theme) #4394e5
--pf-v6-c-text-input-group--BorderColor --pf-v6-c-text-input-group--m-hover--BorderColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error)	--pf-v6-c-text-input-group__text-input--PaddingInlineEnd	calc(1rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group__text-input--PaddingInlineEnd --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--md + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(1rem + --pf-t--global--font--size--sm + 0.5rem) calc(1rem + --pf-t--global--font--size--200 + 0.5rem) calc(1rem + 0.875rem + 0.5rem)
	.pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities)	--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd	0.5rem
--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities)	--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd	calc(0.5rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd calc(--pf-t--global--spacer--sm + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--200 + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(0.5rem + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(0.5rem + --pf-t--global--font--size--sm + 0.5rem) calc(0.5rem + --pf-t--global--font--size--200 + 0.5rem) calc(0.5rem + 0.875rem + 0.5rem)
	.pf-v6-c-text-input-group__main.pf-m-icon	--pf-v6-c-text-input-group__text--Position	relative
	.pf-v6-c-text-input-group__main.pf-m-icon	--pf-v6-c-text-input-group__text-input--PaddingInlineStart	calc(1rem + 0.875rem + 0.5rem)
--pf-v6-c-text-input-group__text-input--PaddingInlineStart --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart calc(--pf-t--global--spacer--control--horizontal--default + --pf-v6-c-text-input-group__icon--FontSize + --pf-t--global--spacer--gap--text-to-element--default) calc(--pf-t--global--spacer--md + --pf-t--global--icon--size--font--body--default + --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 + --pf-t--global--font--size--body--default + --pf-t--global--spacer--200) calc(1rem + --pf-t--global--font--size--sm + 0.5rem) calc(1rem + --pf-t--global--font--size--200 + 0.5rem) calc(1rem + 0.875rem + 0.5rem)

Edit this page on GitHub