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


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

<LiveExample html={Example1} />

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


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

<LiveExample html={Example2} />

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

### Inline edit action group


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

<LiveExample html={Example3} />

### Inline edit action group icon buttons


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

<LiveExample html={Example4} />

### Single inline edit (default)


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

<LiveExample html={Example5} />

### Single inline edit (active)


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

<LiveExample html={Example6} />

### Free form edit


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

<LiveExample html={Example7} />

### Single inline edit with label (default)


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

<LiveExample html={Example8} />

### State valid


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

<LiveExample html={Example9} />

### State invalid


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

<LiveExample html={Example10} />

### Inline edit table row


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

<LiveExample html={Example11} />

## 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` | `<form>`, `<div>` | 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. |

```
-->
```