Skip to content
PatternFly

Inline edit

An inline edit component allows users to switch between a read-only view and an edit view of description lists, page text elements, or tables as needed. Inline editing saves the user from opening a modal window or redirecting to a separate edit page so that they can edit in context of their current view.

Introduction

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

Generic groups

.pf-v5-c-inline-edit__groups provide basic layout support and have several available modifiers (.pf-m-action-group, .pf-m-icon-group).

Actions

Actions (.pf-v5-c-inline-edit__action) are hidden by default and exposed when a region of .pf-v5-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-v5-c-inline-edit. It initiates the editability of elements. When an element becomes editable, toggle is hidden.

Inline edit toggle

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

Inline edit value

Static value

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

Inline edit action group

Inline edit action group icon buttons

Single inline edit (default)

Static value

Single inline edit (active)

Static value

Free form edit

Free form text

Single inline edit with label (default)

Static value

State valid

Static value

State invalid

Static value

Inline edit table row

This is the table caption
Text input Disabled text input Checkboxes Radios Number
Text input description content
Text input disabled, description content
Check 1, Check 2
Radio 1, Radio 2
2
Text input description content
Text input disabled, description content
Check 1, Check 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-v5-c-inline-edit__toggle > button
Provides an accessible description for toggle button. Required
aria-labelledby="[labelling element] [toggle button id]"
.pf-v5-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-v5-c-inline-edit__editable-text
Ensures the text node is editable.
role="textbox"
.pf-v5-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-v5-c-inline-edit
<form>, <div>
Initiates the inline edit component. Required
.pf-v5-c-inline-edit__value
*
Initiates an inline edit value. Required
.pf-v5-c-inline-edit__input
*
Initiates an inline edit input. Required
.pf-v5-c-inline-edit__editable-text
*
Initiates an inline editable text element.
.pf-v5-c-inline-edit__label
*
Initiates an inline edit label.
.pf-v5-c-inline-edit__action
*
Initiates an inline edit action (visible when inline edit region is active). Required
.pf-m-inline-editable
.pf-v5-c-inline-edit, .pf-v5-c-inline-edit [block level element]
Modifies an inline edit region for editable state.
.pf-m-action-group
.pf-v5-c-inline-edit__group
Modifies group for action group.
.pf-m-icon-group
.pf-v5-c-inline-edit__group
Modifies an action group item spacing.
.pf-m-column
.pf-v5-c-inline-edit__group
Modifies an action group flex direction.
.pf-m-footer
.pf-v5-c-inline-edit__group
Modifies an inline edit group margin-top.
.pf-m-bold
.pf-v5-c-inline-edit__label
Modifies an inline edit label's font-weight.
.pf-m-valid
.pf-v5-c-inline-edit__action
Modifies the action button state.
.pf-m-enable-editable
.pf-v5-c-inline-edit__action
Exposes an inline edit action by default.
-->

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__group--item--MarginRight
0.5rem
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--Color
#06c
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color
#004080
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__action--m-icon-group--item--MarginRight
0
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__group--m-footer--MarginTop
2rem
.pf-v5-c-inline-edit--pf-v5-c-inline-edit__label--m-bold--FontWeight
700
.pf-v5-c-inline-edit__group.pf-m-icon-group--pf-v5-c-inline-edit__group--item--MarginRight
0
.pf-v5-c-inline-edit__group.pf-m-column--pf-v5-c-inline-edit__group--item--MarginRight
0
.pf-v5-c-inline-edit__group > :last-child--pf-v5-c-inline-edit__group--item--MarginRight
0
.pf-v5-c-inline-edit__action.pf-m-valid .pf-v5-c-button.pf-m-plain--pf-v5-c-button--m-plain--Color
#06c
.pf-v5-c-inline-edit__action.pf-m-valid .pf-v5-c-button.pf-m-plain:hover--pf-v5-c-button--m-plain--Color
#004080

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines