Skip to Content
Patternfly Logo

Input group

Use an input group when you want to group multiple input types, e.g., a text input and a button, into one control. Related design guidelines: Data input

ExamplesDocumentationCSS Variables

Examples

Inputgroup





.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

ClassApplied toOutcome
.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--100global_Color_100
#151515
.pf-c-input-group--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-input-group--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-input-group--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-input-group--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-input-group--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-input-group--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-input-group--pf-c-input-group--BackgroundColorc_input_group_BackgroundColor
#fff
.pf-c-input-group--pf-c-input-group__text--FontSizec_input_group__text_FontSize
1rem
.pf-c-input-group--pf-c-input-group__text--PaddingRightc_input_group__text_PaddingRight
0.5rem
.pf-c-input-group--pf-c-input-group__text--PaddingLeftc_input_group__text_PaddingLeft
0.5rem
.pf-c-input-group--pf-c-input-group__text--Colorc_input_group__text_Color
#6a6e73
.pf-c-input-group--pf-c-input-group__text--BorderWidthc_input_group__text_BorderWidth
1px
.pf-c-input-group--pf-c-input-group__text--BorderTopColorc_input_group__text_BorderTopColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BorderRightColorc_input_group__text_BorderRightColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BorderBottomColorc_input_group__text_BorderBottomColor
#8a8d90
.pf-c-input-group--pf-c-input-group__text--BorderLeftColorc_input_group__text_BorderLeftColor
#f0f0f0
.pf-c-input-group--pf-c-input-group__text--BackgroundColorc_input_group__text_BackgroundColor
#fff
.pf-c-input-group--pf-c-input-group__textarea--MinHeightc_input_group__textarea_MinHeight
2rem
.pf-c-input-group--pf-c-input-group--c-form-control--invalid--ZIndexc_input_group_c_form_control_invalid_ZIndex
100
.pf-c-input-group--pf-c-input-group--c-form-control--MarginRightc_input_group_c_form_control_MarginRight
1px