Examples
Plain
The following example shows a TextInputGroup with the .pf-m-plain class applied. A plain TextInputGroup must only be used when contained in an ancestor that has its own border or background color styling.
For the purposes of this example, the TextInputGroup is contained in a wrapper with dashed border styling to show where the component is.
Filters expanded
- Label one
- Label two
- Label three
- Label four
- Label five
- Label six
- Label seven
- Label eight
- Label nine
- Label ten
- Label eleven
- Label twelve
- Label thirteen
- Label fourteen
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-success | .pf-v6-c-text-input-group | Applies success validation styling. |
.pf-m-warning | .pf-v6-c-text-input-group | Applies warning validation styling. |
.pf-m-error | .pf-v6-c-text-input-group | Applies error validation styling. |
.pf-m-icon | .pf-v6-c-text-input-group__main | Applies styling when icons are included in the container. |
.pf-m-status | .pf-v6-c-text-input-group__icon | Applies status styling to the icon, matching the status modifier applied to .pf-v6-c-text-input-group. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-success--BorderColor | (In light theme) #3d7317 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-warning--BorderColor | (In light theme) #dca614 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-error--BorderColor | (In light theme) #b1380b | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--BorderWidth | 1px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__LineHeight | 1.5 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-hover--m-success--BorderColor | (In light theme) #204d00 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor | (In light theme) #b98412 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-hover--m-error--BorderColor | (In light theme) #731f00 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart | calc(0.5rem / 2) | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart | calc(1rem + 0.875rem + 0.5rem) | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--RowGap | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--ColumnGap | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text--BorderRadius--base | 6px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text--BorderStartStartRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text--BorderStartEndRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text--BorderEndEndRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text--BorderEndStartRadius | 6px | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart | calc(0.5rem / 2) | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd | calc(0.5rem / 2) | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd | calc(0.5rem / 2) | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--PaddingBlockStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--PaddingInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--PaddingBlockEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--PaddingInlineStart | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--MinWidth | 12ch | ||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--m-hint--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--placeholder--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--BackgroundColor | transparent | ||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__text-input--OutlineOffset | -6px | ||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--FontSize | 0.875rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--InsetInlineStart | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-disabled__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color | (In light theme) #a3a3a3 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color | (In light theme) #3d7317 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color | (In light theme) #dca614 | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color | (In light theme) #b1380b | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__icon--TranslateY | -50% | ||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group__utilities--child--MarginInlineStart | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-text-input-group) | --pf-v6-c-text-input-group--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-disabled | --pf-v6-c-text-input-group--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-disabled | --pf-v6-c-text-input-group__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-disabled | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-disabled | --pf-v6-c-text-input-group--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-plain | --pf-v6-c-text-input-group--BackgroundColor | transparent | ||
| .pf-v6-c-text-input-group.pf-m-success | --pf-v6-c-text-input-group--BorderColor | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-success | --pf-v6-c-text-input-group--m-hover--BorderColor | (In light theme) #204d00 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-success | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-warning | --pf-v6-c-text-input-group--BorderColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-warning | --pf-v6-c-text-input-group--m-hover--BorderColor | (In light theme) #b98412 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-warning | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-error | --pf-v6-c-text-input-group--BorderColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-error | --pf-v6-c-text-input-group--m-hover--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-error | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-text-input-group:hover | --pf-v6-c-text-input-group--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v6-c-text-input-group__text-input--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-text-input-group__main.pf-m-icon | --pf-v6-c-text-input-group__text--Position | relative | ||
| .pf-v6-c-text-input-group__main.pf-m-icon | --pf-v6-c-text-input-group__text-input--PaddingInlineStart | calc(1rem + 0.875rem + 0.5rem) | ||
| ||||
