Overview
Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.
Examples
Documentation
Accessibility
When using the .pf-v5-c-input-group always ensure labels are used outside the input group with the .pf-v5-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-v5-c-form-control | When using .pf-v5-c-input-group__text or .pf-v5-c-input-group__action make use of this on the input field. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-input-group | <div> | Initiates the input group. Required |
.pf-v5-c-input-group__item | <div> | Initiates the input group item. |
.pf-v5-c-input-group__text | <span> | Initiates input group text. This should be used within .pf-v5-c-input-group__item to contain text. |
.pf-m-plain | .pf-v5-c-input-group__item | Removes the border from the input group element. |
.pf-m-box | .pf-v5-c-input-group__item | Adds appropriate styling for items that are not form controls. |
.pf-m-fill | .pf-v5-c-input-group__item | Allows the input group element to stretch to fill available space. |
.pf-m-disabled | .pf-v5-c-input-group__item | Adds disabled styling to match a disabled input within the input group. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-input-group | --pf-v5-c-input-group--child--ZIndex | 100 | ||
--pf-v5-c-input-group--child--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--offset | 1px | ||
--pf-v5-c-input-group__item--offset --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--MarginLeft | calc(1px * -1) | ||
--pf-v5-c-input-group__item--MarginLeft calc(--pf-v5-c-input-group__item--offset * -1) calc(--pf-v5-global--BorderWidth--sm * -1) calc($pf-v5-global--BorderWidth--sm * -1) calc(1px * -1) | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--BorderWidth--base | 1px | ||
--pf-v5-c-input-group__item--BorderWidth--base --pf-v5-c-input-group__item--offset --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--BorderColor--base | #f0f0f0 | ||
--pf-v5-c-input-group__item--BorderColor--base --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--BorderColor--accent | #8a8d90 | ||
--pf-v5-c-input-group__item--BorderColor--accent --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--BackgroundColor | transparent | ||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--PaddingRight | 0.5rem | ||
--pf-v5-c-input-group__item--m-box--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--PaddingLeft | 0.5rem | ||
--pf-v5-c-input-group__item--m-box--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BackgroundColor | #fff | ||
--pf-v5-c-input-group__item--m-box--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BorderWidth | 1px | ||
--pf-v5-c-input-group__item--m-box--BorderWidth --pf-v5-c-input-group__item--offset --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-input-group__item--m-box--BorderTopColor --pf-v5-c-input-group__item--BorderColor--base --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-input-group__item--m-box--BorderRightColor --pf-v5-c-input-group__item--BorderColor--base --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-input-group__item--m-box--BorderBottomColor --pf-v5-c-input-group__item--BorderColor--accent --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-box--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-input-group__item--m-box--BorderLeftColor --pf-v5-c-input-group__item--BorderColor--base --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-plain--BackgroundColor | transparent | ||
| .pf-v5-c-input-group | --pf-v5-c-input-group__text--FontSize | 1rem | ||
--pf-v5-c-input-group__text--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__text--Color | #6a6e73 | ||
--pf-v5-c-input-group__text--Color --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-disabled__text--Color | #6a6e73 | ||
--pf-v5-c-input-group__item--m-disabled__text--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-disabled--BorderBottomColor | transparent | ||
| .pf-v5-c-input-group | --pf-v5-c-input-group__item--m-disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-input-group__item--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group__item.pf-m-box | --pf-v5-c-input-group__item--BackgroundColor | #fff | ||
--pf-v5-c-input-group__item--BackgroundColor --pf-v5-c-input-group__item--m-box--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-input-group__item.pf-m-plain | --pf-v5-c-input-group__item--MarginLeft | 0 | ||
| .pf-v5-c-input-group__item.pf-m-plain | --pf-v5-c-input-group__item--BackgroundColor | transparent | ||
--pf-v5-c-input-group__item--BackgroundColor --pf-v5-c-input-group__item--m-plain--BackgroundColor transparent | ||||
| .pf-v5-c-input-group__item.pf-m-disabled | --pf-v5-c-input-group__item--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-input-group__item--BackgroundColor --pf-v5-c-input-group__item--m-disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-input-group__item.pf-m-disabled | --pf-v5-c-input-group__item--m-box--BorderBottomColor | transparent | ||
--pf-v5-c-input-group__item--m-box--BorderBottomColor --pf-v5-c-input-group__item--m-disabled--BorderBottomColor transparent | ||||
| .pf-v5-c-input-group__item.pf-m-disabled | --pf-v5-c-input-group__text--Color | #6a6e73 | ||
--pf-v5-c-input-group__text--Color --pf-v5-c-input-group__item--m-disabled__text--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub