package.docs.components.InlineEdit.examples.InlineEdit.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: Inline edit
section: components
cssPrefix: pf-v6-c-inline-edit
---## Introduction

**Inline edit** is a utilitarian component that has two core elements, `.pf-v6-c-inline-edit__value` and `.pf-v6-c-inline-edit__input` and is based on a simple concept. When **value** is visible, **input** is hidden, and vice versa.

### Generic groups

`.pf-v6-c-inline-edit__group`s provide basic layout support and have several available modifiers (`.pf-m-action-group`, `.pf-m-icon-group`).

### Actions

**Actions** (`.pf-v6-c-inline-edit__action`) are hidden by default and exposed when a region of `.pf-v6-c-inline-edit` becomes active. The default visibility of an **action** or **action group** can be inversed by adding `.pf-m-enable-editable`. `.pf-m-enable-editable` flags an element or group of elements as the controlling agents for enabling editable content and therefore is visible by default and hidden when inline editing is enabled.

## Examples

Inline edit **toggle** can be placed anywhere within `.pf-v6-c-inline-edit`. It initiates the editability of elements. When an element becomes editable, **toggle** is hidden.

### Inline edit toggle

```html

  
    
  


```

Inline edit **value** can be placed anywhere within `.pf-v6-c-inline-edit`. It is visible by default and hidden when inline edit becomes **editable**.

### Inline edit value

```html

  Static value


```

Inline edit **action-group** contains save and cancel actions and is only visible when inline edit is **editable**.

### Inline edit action group

```html

  
    
      
    
    
      
    
  


```

### Inline edit action group icon buttons

```html

  
    
      
    
    
      
    
  


```

### Single inline edit (default)

```html

  
    Static value
    
      
    
  
  
    
      
        
      
    
    
      
        
      
      
        
      
    
  


```

### Single inline edit (active)

```html

  
    Static value
    
      
    
  
  
    
      
        
      
    
    
      
        
      
      
        
      
    
  


```

### Free form edit

```html

  Free form text


```

### Single inline edit with label (default)

```html

  
    Single inline edit group
    
      
    
  
  Static value
  
    
      
        
      
    
    
      
        
      
      
        
      
    
  


```

### State valid

```html

  
    Valid example
    
      
    
  
  Static value
  
    
      
        
      
    
    
      
        
      
      
        
      
    
  


```

### State invalid

```html

  
    Invalid example
    
      
    
  
  Static value
  
    
      
        
        
          
            
          
        
      
    
    
      
        
      
      
        
      
    
  


```

### Inline edit table row

```html

  
    This is the table caption

    
      
        Text input

        Disabled text input

        Checkboxes

        Radios

        Number

        
          Actions
        

        
          Actions
        
      
    

    
      
        
          Text input description content
          
            
              
            
          
        

        
          Text input disabled, description content
          
            
              
            
          
        
        
          Check 1, Check 2
          
            
              
                

                Check 1
              
            
            
              
                

                Check 2
              
            
          
        
        
          Radio 1, Radio 2
          
            
              
                

                Radio 1
              
            
            
              
                

                Radio 2
              
            
          
        
        
          2
          
            
              
            
          
        
        
          
            
              
            
            
              
            
          
          
            
          
        

        
          
        
      

      
        
          Text input description content
          
            
              
            
          
        

        
          Text input disabled, description content
          
            
              
            
          
        
        
          Check 1, Check 2
          
            
              
                

                Check 1
              
            
            
              
                

                Check 2
              
            
          
        
        
          Radio 1, Radio 2
          
            
              
                

                Radio 1
              
            
            
              
                

                Radio 2
              
            
          
        
        
          2
          
            
              
            
          
        
        
          
            
              
            
            
              
            
          
          
            
          
        

        
          
        
      
    
  


```

## Documentation

### Accessibility

All accessibility requirements for inputs apply to elements within inline edit.

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
| `aria-label="descriptive text"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
| `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
| `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
| `contenteditable="true"` | `.pf-v6-c-inline-edit__editable-text` | Ensures the text node is editable. |
| `role="textbox"` | `.pf-v6-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
| `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-inline-edit` | ``, `` | Initiates the inline edit component. **Required** |
| `.pf-v6-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
| `.pf-v6-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
| `.pf-v6-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
| `.pf-v6-c-inline-edit__label` | `*` | Initiates an inline edit label. |
| `.pf-v6-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
| `.pf-m-inline-editable` | `.pf-v6-c-inline-edit`, `.pf-v6-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
| `.pf-m-action-group` | `.pf-v6-c-inline-edit__group` | Modifies group for action group. |
| `.pf-m-icon-group` | `.pf-v6-c-inline-edit__group` | Modifies an action group item spacing. |
| `.pf-m-column` | `.pf-v6-c-inline-edit__group` | Modifies an action group flex direction. |
| `.pf-m-footer` | `.pf-v6-c-inline-edit__group` | Modifies an inline edit group margin-top. |
| `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
| `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. |
| `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. |

```
-->
```
Text input	Disabled text input	Checkboxes	Radios	Number	Actions	Actions
Text input description content	Text input disabled, description content	Check 1, Check 2 Check 1 Check 2	Radio 1, Radio 2 Radio 1 Radio 2	2
Text input description content	Text input disabled, description content	Check 1, Check 2 Check 1 Check 2	Radio 1, Radio 2 Radio 1 Radio 2	2