Skip to content
Patternfly Logo

Examples

Variations





.00

@example.com





Documentation

Overview

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

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 attributues. 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.

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__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

View source on GitHub