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-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 attributes. 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> | 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. |
.pf-m-plain | .pf-c-input-group | Removes the background from the input group. |
.pf-m-plain | .pf-c-input-group__text | Removes the border from the text element. |
.pf-m-disabled | .pf-c-input-group__text | Adds disabled styling to match a disabled input within the input group. |
CSS variables
| .pf-c-input-group | --pf-global--Color--100 | #151515 | ||
| .pf-c-input-group | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-input-group | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-input-group | --pf-global--primary-color--100 | #06c | ||
| .pf-c-input-group | --pf-global--link--Color | #06c | ||
| .pf-c-input-group | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-input-group | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-input-group | --pf-c-input-group--BackgroundColor | #fff | ||
| .pf-c-input-group | --pf-c-input-group--child--ZIndex | 100 | ||
| .pf-c-input-group | --pf-c-input-group__text--FontSize | 1rem | ||
| .pf-c-input-group | --pf-c-input-group__text--PaddingRight | 0.5rem | ||
| .pf-c-input-group | --pf-c-input-group__text--PaddingLeft | 0.5rem | ||
| .pf-c-input-group | --pf-c-input-group__text--Color | #6a6e73 | ||
| .pf-c-input-group | --pf-c-input-group__text--BorderWidth | 1px | ||
| .pf-c-input-group | --pf-c-input-group__text--BorderTopColor | #f0f0f0 | ||
| .pf-c-input-group | --pf-c-input-group__text--BorderRightColor | #f0f0f0 | ||
| .pf-c-input-group | --pf-c-input-group__text--BorderBottomColor | #8a8d90 | ||
| .pf-c-input-group | --pf-c-input-group__text--BorderLeftColor | #f0f0f0 | ||
| .pf-c-input-group | --pf-c-input-group__text--BackgroundColor | #fff | ||
| .pf-c-input-group | --pf-c-input-group__textarea--MinHeight | 2rem | ||
| .pf-c-input-group | --pf-c-input-group__text--m-disabled--Color | #6a6e73 | ||
| .pf-c-input-group | --pf-c-input-group__text--m-disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-input-group | --pf-c-input-group__text--m-disabled--BorderBottomColor | transparent | ||
| .pf-c-input-group | --pf-c-input-group--c-form-control--invalid--ZIndex | 100 | ||
| .pf-c-input-group | --pf-c-input-group--c-form-control--MarginRight | 0 | ||
| .pf-c-input-group.pf-m-plain | --pf-c-input-group--BackgroundColor | transparent | ||
| .pf-c-input-group__text.pf-m-plain | --pf-c-input-group__text--BorderWidth | 0 | ||
| .pf-c-input-group__text.pf-m-disabled | --pf-c-input-group__text--Color | #6a6e73 | ||
| .pf-c-input-group__text.pf-m-disabled | --pf-c-input-group__text--BackgroundColor | #f0f0f0 | ||
| .pf-c-input-group__text.pf-m-disabled | --pf-c-input-group__text--BorderBottomColor | transparent | ||
View source on GitHub