- React
- HTML

import ’./TextInputGroup.css’

## Examples

### Basic

### Disabled

### 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.

### Utilities and icon with placeholder text

### With validation

### Filters

### Filters expanded

### Autocomplete last option hint

### Search input group

### Search input group, no match

### Search input group, match with result count

### Search input group, match with navigable options

### Search input group, expandable

### Search input group, with submit button

### Search input group, advanced search

### Search input group, advanced search expanded

### Search input group, autocomplete

### Search input group, autocomplete last option hint

### Search input group, advanced search expanded with autocomplete

### 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