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-v6-c-input-group always ensure labels are used outside the input group with the .pf-v6-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-v6-c-form-control | When using .pf-v6-c-input-group__text or .pf-v6-c-input-group__action make use of this on the input field. |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-input-group | <div> | Initiates the input group. Required |
.pf-v6-c-input-group__item | <div> | Initiates the input group item. |
.pf-v6-c-input-group__text | <span> | Initiates input group text. This should be used within .pf-v6-c-input-group__item to contain text. |
.pf-m-plain | .pf-v6-c-input-group__item | Removes the border from the input group element. |
.pf-m-box | .pf-v6-c-input-group__item | Adds appropriate styling for items that are not form controls. |
.pf-m-fill | .pf-v6-c-input-group__item | Allows the input group element to stretch to fill available space. |
.pf-m-disabled | .pf-v6-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-v6-c-input-group | --pf-v6-c-input-group--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--offset | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BorderWidth--base | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BorderColor--base | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--BackgroundColor | transparent | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--AlignItems | start | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderInlineEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-box--BorderInlineStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-plain--BackgroundColor | transparent | ||
| .pf-v6-c-input-group | --pf-v6-c-input-group__text--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-disabled__text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-input-group | --pf-v6-c-input-group__item--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-box | --pf-v6-c-input-group__item--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-plain | --pf-v6-c-input-group__item--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-disabled | --pf-v6-c-input-group__item--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-input-group__item.pf-m-disabled | --pf-v6-c-input-group__text--Color | (In light theme) #4d4d4d | ||
| ||||