Input group

An input group combines multiple related controls or inputs to appear as a single control.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-input-group	--pf-v6-c-input-group--Gap	0.25rem
--pf-v6-c-input-group--Gap --pf-t--global--spacer--gap--control-to-control--default --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--offset	1px
--pf-v6-c-input-group__item--offset --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--BorderWidth--base	1px
--pf-v6-c-input-group__item--BorderWidth--base --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--BorderColor--base	(In light theme) #e0e0e0
--pf-v6-c-input-group__item--BorderColor--base --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--BackgroundColor	transparent
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--AlignItems	start
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--PaddingInlineEnd	0.5rem
--pf-v6-c-input-group__item--m-box--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--PaddingInlineStart	0.5rem
--pf-v6-c-input-group__item--m-box--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-input-group__item--m-box--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderWidth	1px
--pf-v6-c-input-group__item--m-box--BorderWidth --pf-v6-c-input-group__item--BorderWidth--base --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderRadius	6px
--pf-v6-c-input-group__item--m-box--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderBlockStartColor	(In light theme) #e0e0e0
--pf-v6-c-input-group__item--m-box--BorderBlockStartColor --pf-v6-c-input-group__item--BorderColor--base --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderInlineEndColor	(In light theme) #e0e0e0
--pf-v6-c-input-group__item--m-box--BorderInlineEndColor --pf-v6-c-input-group__item--BorderColor--base --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderBlockEndColor	(In light theme) #e0e0e0
--pf-v6-c-input-group__item--m-box--BorderBlockEndColor --pf-v6-c-input-group__item--BorderColor--base --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-box--BorderInlineStartColor	(In light theme) #e0e0e0
--pf-v6-c-input-group__item--m-box--BorderInlineStartColor --pf-v6-c-input-group__item--BorderColor--base --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-plain--BackgroundColor	transparent
	.pf-v6-c-input-group	--pf-v6-c-input-group__text--FontSize	0.875rem
--pf-v6-c-input-group__text--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-input-group	--pf-v6-c-input-group__text--Color	(In light theme) #151515
--pf-v6-c-input-group__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-disabled__text--Color	(In light theme) #707070
--pf-v6-c-input-group__item--m-disabled__text--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-input-group__item--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-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade	200ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade	100ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide	200ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide	100ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade	100ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide	100ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--ScaleX	1
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start	100%
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end	0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX	0
--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end 0
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade	0s
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade	0s
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade	0s
--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade 0s
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade	200ms
--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade	100ms
--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group	--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade	100ms
--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded)	--pf-v6-c-input-group--Gap	0
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start	--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX	100%
--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start 100%
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--MaxWidth	100%
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--Visibility	visible
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--Opacity	1
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade	200ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide	200ms
--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-text-input--ScaleX	1
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-action--MaxWidth	100%
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-action--Visibility	visible
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-action--Opacity	1
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade	200ms
--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-expand--MaxWidth	0
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-expand--Visibility	hidden
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-expand--Opacity	0
	.pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded	--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade	0s
--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade 0s
	.pf-v6-c-input-group__item.pf-m-box	--pf-v6-c-input-group__item--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-input-group__item--BackgroundColor --pf-v6-c-input-group__item--m-box--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-input-group__item.pf-m-plain	--pf-v6-c-input-group__item--BackgroundColor	transparent
--pf-v6-c-input-group__item--BackgroundColor --pf-v6-c-input-group__item--m-plain--BackgroundColor transparent
	.pf-v6-c-input-group__item.pf-m-disabled	--pf-v6-c-input-group__item--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-input-group__item--BackgroundColor --pf-v6-c-input-group__item--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-input-group__item.pf-m-disabled	--pf-v6-c-input-group__text--Color	(In light theme) #707070
--pf-v6-c-input-group__text--Color --pf-v6-c-input-group__item--m-disabled__text--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070