Skip to content

Input group

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

Overview

Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.

Examples

Variations





.00

@example.com




%

Documentation

Accessibility

When using the .pf-v6-c-input-group always ensure labels are used outside the input group with the .pf-v6-screen-reader class applied. You can also make use of the aria-describedby, aria-label, or aria-labelledby attributes. For more information on accessibility and forms see the form component.

Attribute
Applied to
Outcome
aria-describedby
.pf-v6-c-form-control
When using .pf-v6-c-input-group__text or .pf-v6-c-input-group__action make use of this on the input field.

Usage

Class
Applied to
Outcome
.pf-v6-c-input-group
<div>
Initiates the input group. Required
.pf-v6-c-input-group__item
<div>
Initiates the input group item.
.pf-v6-c-input-group__text
<span>
Initiates input group text. This should be used within .pf-v6-c-input-group__item to contain text.
.pf-m-plain
.pf-v6-c-input-group__item
Removes the border from the input group element.
.pf-m-box
.pf-v6-c-input-group__item
Adds appropriate styling for items that are not form controls.
.pf-m-fill
.pf-v6-c-input-group__item
Allows the input group element to stretch to fill available space.
.pf-m-disabled
.pf-v6-c-input-group__item
Adds disabled styling to match a disabled input within the input group.
.pf-m-search-expandable
.pf-v6-c-input-group
Modifies an input group to be an expandable search input. Note: The expandable search input can be found in the search input component docs for react and text input group component docs for core.
.pf-m-search-input
.pf-v6-c-input-group__item
Identifies the text input an expandable search input.
.pf-m-search-expand
.pf-v6-c-input-group__item
Identifies the expand button in an expandable search input.
.pf-m-search-action
.pf-v6-c-input-group__item
Identifies actions adjacent to the search input when an expandable search input is expanded.

CSS variables

Expand or collapse columnSelectorVariableValue
.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) #c7c7c7
  • --pf-v6-c-input-group__item--BorderColor--base
  • --pf-t--global--border--color--default
  • --pf-t--global--border--color--100
  • --pf-t--color--gray--30
  • #c7c7c7
.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) #c7c7c7
  • --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--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-input-group--pf-v6-c-input-group__item--m-box--BorderInlineEndColor
(In light theme) #c7c7c7
  • --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--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-input-group--pf-v6-c-input-group__item--m-box--BorderBlockEndColor
(In light theme) #c7c7c7
  • --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--100
  • --pf-t--color--gray--30
  • #c7c7c7
.pf-v6-c-input-group--pf-v6-c-input-group__item--m-box--BorderInlineStartColor
(In light theme) #c7c7c7
  • --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--100
  • --pf-t--color--gray--30
  • #c7c7c7
.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) #4d4d4d
  • --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--60
  • #4d4d4d
.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) #4d4d4d
  • --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--60
  • #4d4d4d

Edit this page on GitHub
Red Hat
Copyright © 2014-2025 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines