package.docs.components.TextInputGroup.examples.TextInputGroup.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
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

```html

  
    
      
        
      
      
    
  


```

### Search input group, no match

```html

  
    
      
        
      
      
    
  
  
    
  


```

### Search input group, match with result count

```html

  
    
      
        
      
      
    
  
  
    3
    
  


```

### Search input group, match with navigable options

```html

  
    
      
        
      
      
    
  
  
    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

  
    
      
        
          
            
          
          
        
      
      
        
      
    
  
  
    
  
  
    
  



  
    
      
        
          
              Username
          
          
            
              
            
          
        
        
          
              First name
          
          
            
              
            
          
        
        
          
              Group
          
          
            
              
            
          
        
        
          
              Email
          
          
            
              
            
          
        
        
          
            
            
          
        
      
    
  


```

### Search input group, autocomplete

```html

  
    
      
        
      
      
    
  
  
    
  



  
    
      
        
      
      
        
      
      
        
      
      
        
      
    
  


```

### Search input group, autocomplete last option hint

```html

  
    
      
        
      
      
    
  
  
    
  



  
    
      
        
      
    
  


```

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

```html

  
    
      
        
          
            
              
            
            
          
        
        
          
        
      
    
    
      
    
    
      
    
  

  
    
      
        
          
            
                Username
            
            
              
                
              
            
          
          
            
                First name
            
            
              
                
              
            
          
          
            
                Group
            
            
              
                
              
            
          
          
            
                Email
            
            
              
                
              
            
          
          
            
              
              
            
          
        
      
    
  

  
    
      
        
          
        
        
          
        
        
          
        
        
          
        
      
    
  


```

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