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

Disabled

Plain

The following example shows a TextInputGroup with the .pf-m-plain class applied. A plain TextInputGroup must only be used when contained in an ancestor that has its own border or background color styling.

For the purposes of this example, the TextInputGroup is contained in a wrapper with dashed border styling to show where the component is.

Utilities and icon with placeholder text

With validation

Filters

Label one
Label two
Label three
Label four
Label five
Label six

Filters expanded

Label one
Label two
Label three
Label four
Label five
Label six
Label seven
Label eight
Label nine
Label ten
Label eleven
Label twelve
Label thirteen
Label fourteen

Autocomplete last option hint

Search input group

Search input group, no match

Search input group, match with result count

Search input group, match with navigable options

1 / 3

Search input group, expandable

Collapsed

Expanded

Search input group, with submit button

Search input group, advanced search

Search input group, advanced search expanded

Search input group, autocomplete

Search input group, autocomplete last option hint

Search input group, advanced search expanded with autocomplete

Usage

Class	Applied to	Outcome
`.pf-m-success`	`.pf-v6-c-text-input-group`	Applies success validation styling.
`.pf-m-warning`	`.pf-v6-c-text-input-group`	Applies warning validation styling.
`.pf-m-error`	`.pf-v6-c-text-input-group`	Applies error validation styling.
`.pf-m-icon`	`.pf-v6-c-text-input-group__main`	Applies styling when icons are included in the container.
`.pf-m-status`	`.pf-v6-c-text-input-group__icon`	Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`.

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)

View source on GitHub