--- id: 'Text input group' section: components cssPrefix: pf-v6-c-text-input-group ---import './TextInputGroup.css' ## Examples ### Basic ```html
``` ### Disabled ```html
``` ### 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. ```html
``` ### Utilities and icon with placeholder text ```html
``` ### With validation ```html



``` ### Filters ```html
  • Label one
  • Label two
  • Label three
  • Label four
  • Label five
  • Label six
``` ### Filters expanded ```html
  • 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
``` ### Autocomplete last option hint ```html
``` ### Search input group The React implementation can be found in the [search input](/components/search-input) component. ```html
``` ### Search input group, no match ```html
``` ### Search input group, match with result count ```html
3 matching results
``` ### Search input group, match with navigable options ```html
Showing result 1 / 3
``` ### Search input group, expandable ```html

Collapsed




Expanded


``` ### Search input group, with submit button ```html
``` ### Search input group, advanced search ```html
``` ### Search input group, advanced search expanded ```html
``` ### Search input group, autocomplete ```html
``` ### Search input group, autocomplete last option hint ```html
``` ### Search input group, advanced search expanded with autocomplete ```html
``` ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-text-input-group` | `
` | Creates a text input group. *Required* | | `.pf-v6-c-text-input-group__main` | `
` | Creates a wrapper for the main content. *Required* | | `.pf-v6-c-text-input-group__text` | `` | Creates the text container. *Required*| | `.pf-v6-c-text-input-group__icon` | `` | Creates a container for an icon. | | `.pf-v6-c-text-input-group__text-input` | `` | Creates a text input. *Required* | | `.pf-v6-c-text-input-group__utilities` | `
` | Creates text input utilities container. | | `.pf-v6-c-text-input-group__group` | `
` | 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 `` 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. |