import './TextInputGroup.css'

## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Disabled


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### 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. <br/> <br/>
For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Utilities and icon with placeholder text


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### With validation


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Filters


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Filters expanded


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Autocomplete last option hint


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Search input group


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Search input group, no match


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Search input group, match with result count


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Search input group, match with navigable options


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Search input group, expandable


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Search input group, with submit button


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Search input group, advanced search


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Search input group, advanced search expanded


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Search input group, autocomplete


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Search input group, autocomplete last option hint


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

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


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

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