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__groups 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 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 action-group contains save and cancel actions and is only visible when inline edit is editable.
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. |
-->CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__group--item--MarginInlineEnd | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color | (In light theme) #0066cc | ||
| ||||
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color | (In light theme) #004d99 | ||
| ||||
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart | 2rem | ||
| ||||
| :where(:root, .pf-v6-c-inline-edit) | --pf-v6-c-inline-edit__label--m-bold--FontWeight | 500 | ||
| ||||
| .pf-v6-c-inline-edit__group.pf-m-icon-group | --pf-v6-c-inline-edit__group--item--MarginInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-inline-edit__group.pf-m-column | --pf-v6-c-inline-edit__group--item--MarginInlineEnd | 0 | ||
| .pf-v6-c-inline-edit__group > :last-child | --pf-v6-c-inline-edit__group--item--MarginInlineEnd | 0 | ||
| .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--m-plain--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-inline-edit__action.pf-m-valid .pf-v6-c-button.pf-m-plain:hover | --pf-v6-c-button--m-plain--Color | (In light theme) #004d99 | ||
| ||||
