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-v6-c-text-input-group | <div> | Creates a text input group. Required |
.pf-v6-c-text-input-group__main | <div> | Creates a wrapper for the main content. Required |
.pf-v6-c-text-input-group__text | <span> | Creates the text container. Required |
.pf-v6-c-text-input-group__icon | <span> | Creates a container for an icon. |
.pf-v6-c-text-input-group__text-input | <input> | Creates a text input. Required |
.pf-v6-c-text-input-group__utilities | <div> | Creates text input utilities container. |
.pf-v6-c-text-input-group__group | <div> | Creates text input prev/next nav group. |
.pf-m-plain | .pf-v6-c-text-input-group | Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling. |
.pf-m-disabled | .pf-v6-c-text-input-group | Applies disabled styling. The <input> should also be disabled. |
.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. |
.pf-m-hint | .pf-v6-c-text-input-group__text-input | Applies styling when hints are included in the container. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-success--BorderColor | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-warning--BorderColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-error--BorderColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-hover--m-success--BorderColor | (In light theme) #204d00 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor | (In light theme) #b98412 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-hover--m-error--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart | calc(0.5rem / 2) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart | calc(1rem + 0.875rem + 0.5rem) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd | calc(1rem + 0.875rem + 0.5rem) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd | calc(0.5rem + 0.875rem + 0.5rem) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--RowGap | 0.25rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--ColumnGap | 0.25rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text--BorderRadius--base | 6px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text--BorderStartStartRadius | 6px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text--BorderStartEndRadius | 6px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text--BorderEndEndRadius | 6px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text--BorderEndStartRadius | 6px | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart | calc(0.5rem / 2) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd | calc(0.5rem / 2) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd | calc(0.5rem / 2) | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--MinWidth | 12ch | ||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--m-hint--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--placeholder--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--BackgroundColor | transparent | ||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__text-input--OutlineOffset | -6px | ||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--InsetInlineStart | 1rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-disabled__icon--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__icon--TranslateY | -50% | ||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group__utilities--child--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-text-input-group | --pf-v6-c-text-input-group--m-disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| .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) #4d4d4d | ||
| ||||
| .pf-v6-c-text-input-group.pf-m-disabled | --pf-v6-c-text-input-group__icon--m-status--Color | (In light theme) #4d4d4d | ||
| ||||
| .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 | calc(1rem + 0.875rem + 0.5rem) | ||
| ||||
| .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) | --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) | --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd | calc(0.5rem + 0.875rem + 0.5rem) | ||
| ||||
| .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) | ||
| ||||
