HTML

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 example









.00


@example.com








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#8b8d8f
--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#72767b
--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