HTML

Input group

ExamplesDocumentationCSS variables

Examples

Inputgroup example

Copied to clipboard

Documentation

Overview

Use the input group to extend form controls by adding text, buttons, dropdowns, 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> Iniaties the input group. Required
.pf-c-input-group__text <span> Iniaties the input group text. This can be used to show text, radio, icons, or check boxes.

CSS variables

--pf-c-input-group--BackgroundColorc_input_group_BackgroundColor#fff
--pf-c-input-group--BorderRadiusc_input_group_BorderRadius3px
--pf-c-input-group__text--BackgroundColorc_input_group__text_BackgroundColor#fff
--pf-c-input-group__text--BorderBottomColorc_input_group__text_BorderBottomColor#8a8d90
--pf-c-input-group__text--BorderLeftColorc_input_group__text_BorderLeftColor#ededed
--pf-c-input-group__text--BorderRightColorc_input_group__text_BorderRightColor#ededed
--pf-c-input-group__text--BorderTopColorc_input_group__text_BorderTopColor#ededed
--pf-c-input-group__text--BorderWidthc_input_group__text_BorderWidth1px
--pf-c-input-group__text--Colorc_input_group__text_Color#737679
--pf-c-input-group__text--FontSizec_input_group__text_FontSize1rem
--pf-c-input-group__text--PaddingLeftc_input_group__text_PaddingLeft0.5rem
--pf-c-input-group__text--PaddingRightc_input_group__text_PaddingRight0.5rem
--pf-c-input-group__textarea--MinHeightc_input_group__textarea_MinHeight2rem
--pf-c-input-group--c-button--BorderRadiusc_input_group_c_button_BorderRadius3px
--pf-c-input-group--c-form-control--MarginRightc_input_group_c_form_control_MarginRight1px
--pf-c-input-group--c-form-control--invalid--ZIndexc_input_group_c_form_control_invalid_ZIndex100