Skip to content
Patternfly Logo

Input group

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__text
Removes the border from the text element.

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--c-form-control--invalid--ZIndex
100
.pf-c-input-group--pf-c-input-group--c-form-control--MarginRight
0
.pf-c-input-group__text.pf-m-plain--pf-c-input-group__text--BorderWidth
0

View source on GitHub