---
id: 'Text input group'
section: components
cssPrefix: pf-v6-c-text-input-group
---import './TextInputGroup.css'

## Examples

### Basic

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main">
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value
        aria-label="Type to filter"
      />
    </span>
  </div>
</div>

```

### Disabled

```html
<div class="pf-v6-c-text-input-group pf-m-disabled">
  <div class="pf-v6-c-text-input-group__main">
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        disabled
        value="Disabled"
        aria-label="Disabled text input group example input"
      />
    </span>
  </div>
</div>

```

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

```html
<div class="pf-v6-c-text-input-group pf-m-plain">
  <div class="pf-v6-c-text-input-group__main">
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="Text input group with plain styling"
        aria-label="Type to filter"
      />
    </span>
  </div>
</div>

```

### Utilities and icon with placeholder text

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        placeholder="placeholder"
        value
        aria-label="Type to filter"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### With validation

```html
<div class="pf-v6-c-text-input-group pf-m-success">
  <div class="pf-v6-c-text-input-group__main">
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="Success validation"
        aria-label="Type to filter"
      />
      <span class="pf-v6-c-text-input-group__icon pf-m-status">
        <i aria-hidden="true" class="fas fa-check-circle"></i>
      </span>
    </span>
  </div>
</div>
<br />
<div class="pf-v6-c-text-input-group pf-m-warning">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="Warning validation with icon at start"
        aria-label="Type to filter"
      />
      <span class="pf-v6-c-text-input-group__icon pf-m-status">
        <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
      </span>
    </span>
  </div>
</div>
<br />
<div class="pf-v6-c-text-input-group pf-m-error">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="Error validation with icon at start and utilities"
        aria-label="Type to filter"
      />
      <span class="pf-v6-c-text-input-group__icon pf-m-status">
        <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
      </span>
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__text">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Filters

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main">
    <div class="pf-v6-c-label-group">
      <div class="pf-v6-c-label-group__main">
        <ul
          class="pf-v6-c-label-group__list"
          role="list"
          aria-label="Label group list"
        >
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-one-text"
                >Label one</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-one-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-one-button text-input-group-filters-label-group-label-one-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-two-text"
                >Label two</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-two-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-two-button text-input-group-filters-label-group-label-two-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-three-text"
                >Label three</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-three-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-three-button text-input-group-filters-label-group-label-three-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-four-text"
                >Label four</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-four-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-four-button text-input-group-filters-label-group-label-four-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-five-text"
                >Label five</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-five-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-five-button text-input-group-filters-label-group-label-five-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-label-group-label-six-text"
                >Label six</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-label-group-label-six-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-label-group-label-six-button text-input-group-filters-label-group-label-six-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <button class="pf-v6-c-label pf-m-overflow">
              <span class="pf-v6-c-label__content">
                <span class="pf-v6-c-label__content">
                  <span class="pf-v6-c-label__text">8 more</span>
                </span>
              </span>
            </button>
          </li>
        </ul>
      </div>
    </div>
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value
        aria-label="Type to filter"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Filters expanded

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main">
    <div class="pf-v6-c-label-group">
      <div class="pf-v6-c-label-group__main">
        <ul
          class="pf-v6-c-label-group__list"
          role="list"
          aria-label="Label group list"
        >
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-one-text"
                >Label one</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-one-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-one-button text-input-group-filters-expanded-label-group-label-one-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-two-text"
                >Label two</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-two-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-two-button text-input-group-filters-expanded-label-group-label-two-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-three-text"
                >Label three</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-three-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-three-button text-input-group-filters-expanded-label-group-label-three-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-four-text"
                >Label four</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-four-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-four-button text-input-group-filters-expanded-label-group-label-four-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-five-text"
                >Label five</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-five-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-five-button text-input-group-filters-expanded-label-group-label-five-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-six-text"
                >Label six</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-six-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-six-button text-input-group-filters-expanded-label-group-label-six-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-seven-text"
                >Label seven</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-seven-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-seven-button text-input-group-filters-expanded-label-group-label-seven-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-eight-text"
                >Label eight</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-eight-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-eight-button text-input-group-filters-expanded-label-group-label-eight-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-nine-text"
                >Label nine</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-nine-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-nine-button text-input-group-filters-expanded-label-group-label-nine-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-ten-text"
                >Label ten</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-ten-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-ten-button text-input-group-filters-expanded-label-group-label-ten-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-eleven-text"
                >Label eleven</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-eleven-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-eleven-button text-input-group-filters-expanded-label-group-label-eleven-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-twelve-text"
                >Label twelve</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-twelve-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-twelve-button text-input-group-filters-expanded-label-group-label-twelve-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-thirteen-text"
                >Label thirteen</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-thirteen-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-thirteen-button text-input-group-filters-expanded-label-group-label-thirteen-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
          <li class="pf-v6-c-label-group__list-item">
            <span class="pf-v6-c-label pf-m-outline">
              <span class="pf-v6-c-label__content">
                <span
                  class="pf-v6-c-label__text"
                  id="text-input-group-filters-expanded-label-group-label-fourteen-text"
                >Label fourteen</span>
              </span>
              <span class="pf-v6-c-label__actions">
                <button
                  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
                  type="button"
                  id="text-input-group-filters-expanded-label-group-label-fourteen-button"
                  aria-label="Remove"
                  aria-labelledby="text-input-group-filters-expanded-label-group-label-fourteen-button text-input-group-filters-expanded-label-group-label-fourteen-text"
                >
                  <span class="pf-v6-c-button__icon">
                    <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                  </span>
                </button>
              </span>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value
        aria-label="Type to filter"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Autocomplete last option hint

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main">
    <span class="pf-v6-c-text-input-group__text">
      <input
        class="pf-v6-c-text-input-group__text-input pf-m-hint"
        type="text"
        value="appleseed"
        disabled
        aria-hidden="true"
      />
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="apples"
        aria-label="Type to filter"
      />
    </span>
  </div>
</div>

```

### Search input group

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        placeholder="Find by name"
        value
        aria-label="Search input"
      />
    </span>
  </div>
</div>

```

### Search input group, no match

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        placeholder="Find by name"
        value="Joh"
        aria-label="Search input"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, match with result count

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        placeholder="Find by name"
        value="John Doe"
        aria-label="Search input"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <span class="pf-v6-c-badge pf-m-read">3</span>
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, match with navigable options

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        placeholder="Find by name"
        value="John Doe"
        aria-label="Search input"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <span class="pf-v6-c-badge pf-m-read">1 / 3</span>
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, expandable

```html
<h3>Collapsed</h3>
<br />
<div class="pf-v6-c-input-group pf-m-plain">
  <div class="pf-v6-c-input-group__item pf-m-plain">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Open search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>
<br />
<br />
<h3>Expanded</h3>
<br />
<div class="pf-v6-c-input-group pf-m-plain">
  <div class="pf-v6-c-input-group__item pf-m-fill">
    <div class="pf-v6-c-text-input-group">
      <div class="pf-v6-c-text-input-group__main pf-m-icon">
        <span class="pf-v6-c-text-input-group__text">
          <span class="pf-v6-c-text-input-group__icon">
            <i class="fas fa-fw fa-search"></i>
          </span>
          <input
            class="pf-v6-c-text-input-group__text-input"
            type="text"
            placeholder="Search"
            value
            aria-label="Search input"
          />
        </span>
      </div>
    </div>
  </div>
  <div class="pf-v6-c-input-group__item pf-m-plain">
    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, with submit button

```html
<div class="pf-v6-c-input-group">
  <div class="pf-v6-c-input-group__item pf-m-fill">
    <div class="pf-v6-c-text-input-group">
      <div class="pf-v6-c-text-input-group__main pf-m-icon">
        <span class="pf-v6-c-text-input-group__text">
          <span class="pf-v6-c-text-input-group__icon">
            <i class="fas fa-fw fa-search"></i>
          </span>
          <input
            class="pf-v6-c-text-input-group__text-input"
            type="text"
            placeholder="Find by name"
            value
            aria-label="Search input"
          />
        </span>
      </div>
    </div>
  </div>
  <div class="pf-v6-c-input-group__item">
    <button
      class="pf-v6-c-button pf-m-control"
      type="submit"
      aria-label="Search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-arrow-right" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, advanced search

```html
<div class="pf-v6-c-input-group">
  <div class="pf-v6-c-input-group__item pf-m-fill">
    <div class="pf-v6-c-text-input-group">
      <div class="pf-v6-c-text-input-group__main pf-m-icon">
        <span class="pf-v6-c-text-input-group__text">
          <span class="pf-v6-c-text-input-group__icon">
            <i class="fas fa-fw fa-search"></i>
          </span>
          <input
            class="pf-v6-c-text-input-group__text-input"
            type="text"
            value="username:root firstname:ned"
            aria-label="Search input"
          />
        </span>
      </div>
      <div class="pf-v6-c-text-input-group__utilities">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Clear input"
        >
          <span class="pf-v6-c-button__icon">
            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="pf-v6-c-input-group__item">
    <button
      class="pf-v6-c-button pf-m-control"
      type="button"
      aria-expanded="false"
      aria-label="Advanced search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-caret-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="pf-v6-c-input-group__item">
    <button
      class="pf-v6-c-button pf-m-control"
      type="submit"
      aria-label="Search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-arrow-right" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

```

### Search input group, advanced search expanded

```html
<div class="pf-v6-c-input-group">
  <div class="pf-v6-c-input-group__item pf-m-fill">
    <div class="pf-v6-c-text-input-group">
      <div class="pf-v6-c-text-input-group__main pf-m-icon">
        <span class="pf-v6-c-text-input-group__text">
          <span class="pf-v6-c-text-input-group__icon">
            <i class="fas fa-fw fa-search"></i>
          </span>
          <input
            class="pf-v6-c-text-input-group__text-input"
            type="text"
            value="username:root firstname:ned"
            aria-label="Search input"
          />
        </span>
      </div>
      <div class="pf-v6-c-text-input-group__utilities">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Clear input"
        >
          <span class="pf-v6-c-button__icon">
            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="pf-v6-c-input-group__item">
    <button
      class="pf-v6-c-button pf-m-expanded pf-m-control"
      type="button"
      aria-expanded="true"
      aria-label="Advanced search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-caret-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="pf-v6-c-input-group__item">
    <button
      class="pf-v6-c-button pf-m-control"
      type="submit"
      aria-label="Search"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-arrow-right" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

<div class="pf-v6-c-panel pf-m-raised">
  <div class="pf-v6-c-panel__main">
    <div class="pf-v6-c-panel__main-body">
      <form class="pf-v6-c-form" novalidate>
        <div class="pf-v6-c-form__group">
          <div class="pf-v6-c-form__group-label"><label
              class="pf-v6-c-form__label"
              for="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
            >
              <span class="pf-v6-c-form__label-text">Username</span></label>
          </div>
          <div class="pf-v6-c-form__group-control">
            <span class="pf-v6-c-form-control">
              <input
                type="text"
                value="root"
                id="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
                name="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
              />
            </span>
          </div>
        </div>
        <div class="pf-v6-c-form__group">
          <div class="pf-v6-c-form__group-label"><label
              class="pf-v6-c-form__label"
              for="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
            >
              <span class="pf-v6-c-form__label-text">First name</span></label>
          </div>
          <div class="pf-v6-c-form__group-control">
            <span class="pf-v6-c-form-control">
              <input
                type="text"
                value="ned"
                id="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
                name="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
              />
            </span>
          </div>
        </div>
        <div class="pf-v6-c-form__group">
          <div class="pf-v6-c-form__group-label"><label
              class="pf-v6-c-form__label"
              for="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
            >
              <span class="pf-v6-c-form__label-text">Group</span></label>
          </div>
          <div class="pf-v6-c-form__group-control">
            <span class="pf-v6-c-form-control">
              <input
                type="text"
                id="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
                name="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
              />
            </span>
          </div>
        </div>
        <div class="pf-v6-c-form__group">
          <div class="pf-v6-c-form__group-label"><label
              class="pf-v6-c-form__label"
              for="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
            >
              <span class="pf-v6-c-form__label-text">Email</span></label>
          </div>
          <div class="pf-v6-c-form__group-control">
            <span class="pf-v6-c-form-control">
              <input
                type="text"
                id="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
                name="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
              />
            </span>
          </div>
        </div>
        <div class="pf-v6-c-form__group pf-m-action">
          <div class="pf-v6-c-form__actions">
            <button class="pf-v6-c-button pf-m-primary" type="submit">
              <span class="pf-v6-c-button__text">Submit</span>
            </button>
            <button class="pf-v6-c-button pf-m-link" type="reset">
              <span class="pf-v6-c-button__text">Reset</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

```

### Search input group, autocomplete

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input"
        type="text"
        value="app"
        aria-label="Search input"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

<div class="pf-v6-c-menu">
  <div class="pf-v6-c-menu__content">
    <ul class="pf-v6-c-menu__list" role="menu">
      <li class="pf-v6-c-menu__list-item" role="none">
        <button class="pf-v6-c-menu__item" type="button" role="menuitem">
          <span class="pf-v6-c-menu__item-main">
            <span class="pf-v6-c-menu__item-text">apple</span>
          </span>
        </button>
      </li>
      <li class="pf-v6-c-menu__list-item" role="none">
        <button class="pf-v6-c-menu__item" type="button" role="menuitem">
          <span class="pf-v6-c-menu__item-main">
            <span class="pf-v6-c-menu__item-text">appleby</span>
          </span>
        </button>
      </li>
      <li class="pf-v6-c-menu__list-item" role="none">
        <button class="pf-v6-c-menu__item" type="button" role="menuitem">
          <span class="pf-v6-c-menu__item-main">
            <span class="pf-v6-c-menu__item-text">appleseed</span>
          </span>
        </button>
      </li>
      <li class="pf-v6-c-menu__list-item" role="none">
        <button class="pf-v6-c-menu__item" type="button" role="menuitem">
          <span class="pf-v6-c-menu__item-main">
            <span class="pf-v6-c-menu__item-text">appleton</span>
          </span>
        </button>
      </li>
    </ul>
  </div>
</div>

```

### Search input group, autocomplete last option hint

```html
<div class="pf-v6-c-text-input-group">
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
    <span class="pf-v6-c-text-input-group__text">
      <span class="pf-v6-c-text-input-group__icon">
        <i class="fas fa-fw fa-search"></i>
      </span>
      <input
        class="pf-v6-c-text-input-group__text-input pf-m-hint"
        type="text"
        value="appleseed"
        disabled
        aria-hidden="true"
      />
    </span>
  </div>
  <div class="pf-v6-c-text-input-group__utilities">
    <button
      class="pf-v6-c-button pf-m-plain"
      type="button"
      aria-label="Clear input"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </div>
</div>

<div class="pf-v6-c-menu">
  <div class="pf-v6-c-menu__content">
    <ul class="pf-v6-c-menu__list" role="menu">
      <li class="pf-v6-c-menu__list-item" role="none">
        <button class="pf-v6-c-menu__item" type="button" role="menuitem">
          <span class="pf-v6-c-menu__item-main">
            <span class="pf-v6-c-menu__item-text">appleseed</span>
          </span>
        </button>
      </li>
    </ul>
  </div>
</div>

```

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

```html
<div class="ws-example-wrapper">
  <div class="pf-v6-c-input-group">
    <div class="pf-v6-c-input-group__item pf-m-fill">
      <div class="pf-v6-c-text-input-group">
        <div class="pf-v6-c-text-input-group__main pf-m-icon">
          <span class="pf-v6-c-text-input-group__text">
            <span class="pf-v6-c-text-input-group__icon">
              <i class="fas fa-fw fa-search"></i>
            </span>
            <input
              class="pf-v6-c-text-input-group__text-input"
              type="text"
              value="username:root firstname:n"
              aria-label="Search input"
            />
          </span>
        </div>
        <div class="pf-v6-c-text-input-group__utilities">
          <button
            class="pf-v6-c-button pf-m-plain"
            type="button"
            aria-label="Clear input"
          >
            <span class="pf-v6-c-button__icon">
              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div class="pf-v6-c-input-group__item">
      <button
        class="pf-v6-c-button pf-m-expanded pf-m-control"
        type="button"
        aria-expanded="true"
        aria-label="Advanced search"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-caret-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-input-group__item">
      <button
        class="pf-v6-c-button pf-m-control"
        type="submit"
        aria-label="Search"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>

  <div class="pf-v6-c-panel pf-m-raised">
    <div class="pf-v6-c-panel__main">
      <div class="pf-v6-c-panel__main-body">
        <form class="pf-v6-c-form" novalidate>
          <div class="pf-v6-c-form__group">
            <div class="pf-v6-c-form__group-label"><label
                class="pf-v6-c-form__label"
                for="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
              >
                <span class="pf-v6-c-form__label-text">Username</span></label>
            </div>
            <div class="pf-v6-c-form__group-control">
              <span class="pf-v6-c-form-control">
                <input
                  type="text"
                  value="root"
                  id="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
                  name="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
                />
              </span>
            </div>
          </div>
          <div class="pf-v6-c-form__group">
            <div class="pf-v6-c-form__group-label"><label
                class="pf-v6-c-form__label"
                for="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
              >
                <span class="pf-v6-c-form__label-text">First name</span></label>
            </div>
            <div class="pf-v6-c-form__group-control">
              <span class="pf-v6-c-form-control">
                <input
                  type="text"
                  value="ned"
                  id="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
                  name="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
                />
              </span>
            </div>
          </div>
          <div class="pf-v6-c-form__group">
            <div class="pf-v6-c-form__group-label"><label
                class="pf-v6-c-form__label"
                for="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
              >
                <span class="pf-v6-c-form__label-text">Group</span></label>
            </div>
            <div class="pf-v6-c-form__group-control">
              <span class="pf-v6-c-form-control">
                <input
                  type="text"
                  id="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
                  name="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
                />
              </span>
            </div>
          </div>
          <div class="pf-v6-c-form__group">
            <div class="pf-v6-c-form__group-label"><label
                class="pf-v6-c-form__label"
                for="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
              >
                <span class="pf-v6-c-form__label-text">Email</span></label>
            </div>
            <div class="pf-v6-c-form__group-control">
              <span class="pf-v6-c-form-control">
                <input
                  type="text"
                  id="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
                  name="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
                />
              </span>
            </div>
          </div>
          <div class="pf-v6-c-form__group pf-m-action">
            <div class="pf-v6-c-form__actions">
              <button class="pf-v6-c-button pf-m-primary" type="submit">
                <span class="pf-v6-c-button__text">Submit</span>
              </button>
              <button class="pf-v6-c-button pf-m-link" type="reset">
                <span class="pf-v6-c-button__text">Reset</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="pf-v6-c-menu">
    <div class="pf-v6-c-menu__content">
      <ul class="pf-v6-c-menu__list" role="menu">
        <li class="pf-v6-c-menu__list-item" role="none">
          <button class="pf-v6-c-menu__item" type="button" role="menuitem">
            <span class="pf-v6-c-menu__item-main">
              <span class="pf-v6-c-menu__item-text">nancy</span>
            </span>
          </button>
        </li>
        <li class="pf-v6-c-menu__list-item" role="none">
          <button class="pf-v6-c-menu__item" type="button" role="menuitem">
            <span class="pf-v6-c-menu__item-main">
              <span class="pf-v6-c-menu__item-text">ned</span>
            </span>
          </button>
        </li>
        <li class="pf-v6-c-menu__list-item" role="none">
          <button class="pf-v6-c-menu__item" type="button" role="menuitem">
            <span class="pf-v6-c-menu__item-main">
              <span class="pf-v6-c-menu__item-text">neil</span>
            </span>
          </button>
        </li>
        <li class="pf-v6-c-menu__list-item" role="none">
          <button class="pf-v6-c-menu__item" type="button" role="menuitem">
            <span class="pf-v6-c-menu__item-main">
              <span class="pf-v6-c-menu__item-text">nicole</span>
            </span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

```

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