package.docs.components.InputGroup.examples.InputGroup.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: Input group
section: components
cssPrefix: pf-v6-c-input-group
---### Overview

Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.

## Examples

### Variations

```html

  
    
  
  
    
      
    
  
  
    
  




  
    
      
    
  
  
    
  




  
    
  
  
    
  
  
    
      
    
  
  
    
  




  
    
  
  
    
      
    
  
  
    
  




  
    
      
    
  
  
    
      
    
  
  
    .00
  




  
    
      
    
  
  
    @example.com
  




  
    
      
    
  
  
    
      
      
        
          
        
      
    
  




  
    
      
    
  
  
    
  




  
    
      
    
  
  
    
  




  
    
      
    
  
  
    %
  


```

## Documentation

### Accessibility

When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-describedby` | `.pf-v6-c-form-control` |  When using `.pf-v6-c-input-group__text` or `.pf-v6-c-input-group__action` make use of this on the input field. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-input-group` | `` |  Initiates the input group. **Required** |
| `.pf-v6-c-input-group__item` | `` |  Initiates the input group item. |
| `.pf-v6-c-input-group__text` | `` |  Initiates input group text. This should be used within `.pf-v6-c-input-group__item` to contain text. |
| `.pf-m-plain` | `.pf-v6-c-input-group__item` | Removes the border from the input group element. |
| `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
| `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
| `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |