Skip to content
PatternFly logo

Input group

An input group groups multiple related controls or inputs together so they appear as one 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-c-input-group always ensure labels are used outside the input group with the .pf-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-c-form-control
When using .pf-c-input-group__text or .pf-c-input-group__action make use of this on the input field.

Usage

Class
Applied to
Outcome
.pf-c-input-group
<div>
Initiates the input group. Required
.pf-c-input-group__text
<span>
Initiates the input group text. This can be used to show text, radio, icons, or check boxes.
.pf-m-plain
.pf-c-input-group
Removes the background from the input group.
.pf-m-plain
.pf-c-input-group__text
Removes the border from the text element.
.pf-m-disabled
.pf-c-input-group__text
Adds disabled styling to match a disabled input within the input group.

CSS variables

.pf-c-input-group--pf-global--Color--100
#151515
.pf-c-input-group--pf-global--Color--200
#6a6e73
.pf-c-input-group--pf-global--BorderColor--100
#d2d2d2
.pf-c-input-group--pf-global--primary-color--100
#06c
.pf-c-input-group--pf-global--link--Color
#06c
.pf-c-input-group--pf-global--link--Color--hover
#004080
.pf-c-input-group--pf-global--BackgroundColor--100
#fff
.pf-c-input-group--pf-c-input-group--BackgroundColor
#fff
.pf-c-input-group--pf-c-input-group--child--ZIndex
100
.pf-c-input-group--pf-c-input-group__text--FontSize
1rem
.pf-c-input-group--pf-c-input-group__text--PaddingRight
0.5rem
.pf-c-input-group--pf-c-input-group__text--PaddingLeft
0.5rem
.pf-c-input-group--pf-c-input-group__text--Color
#6a6e73
.pf-c-input-group--pf-c-input-group__text--BorderWidth
1px
.pf-c-input-group--pf-c-input-group__text--BorderTopColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BorderRightColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BorderBottomColor
#8a8d90
.pf-c-input-group--pf-c-input-group__text--BorderLeftColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BackgroundColor
#fff
.pf-c-input-group--pf-c-input-group__textarea--MinHeight
2rem
.pf-c-input-group--pf-c-input-group__text--m-disabled--Color
#6a6e73
.pf-c-input-group--pf-c-input-group__text--m-disabled--BackgroundColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--m-disabled--BorderBottomColor
transparent
.pf-c-input-group--pf-c-input-group--c-form-control--invalid--ZIndex
100
.pf-c-input-group--pf-c-input-group--c-form-control--MarginRight
0
.pf-c-input-group.pf-m-plain--pf-c-input-group--BackgroundColor
transparent
.pf-c-input-group__text.pf-m-plain--pf-c-input-group__text--BorderWidth
0
.pf-c-input-group__text.pf-m-disabled--pf-c-input-group__text--Color
#6a6e73
.pf-c-input-group__text.pf-m-disabled--pf-c-input-group__text--BackgroundColor
#f0f0f0
.pf-c-input-group__text.pf-m-disabled--pf-c-input-group__text--BorderBottomColor
transparent

View source on GitHub