Introduction
Inline edit is a wrapper around an input component such as a text field. It 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.
Anatomy
Trigger
Inline edit button usually placed close to the editable element. It is visible by default and hidden when inline edit becomes editable.
A trigger can be a separate button or menu item of an editable element.
The editing indicator can appear after a click or when hovering or focusing on an element. This option is less accessible because it does not initially display a possible action but it can be implemented after successful user tests.
Consider setting up accessible navigation for floating actions.
Input type
You can use various types of input fields such as text area and select. The appearance of the inline edit will vary depending on the input component it is used with.
Confirmation actions
Action buttons include a confirm (checkmark) and a cancel (cross) button and is only visible when inline edit is editable. These indicate the completion of editing and the cancellation of editing respectively.
If the user did not confirm the changes and closed the dialog box, or in the case of internal editing, starts interacting with other elements of the interface or switched to another screen, the changes are automatically canceled and the edited element returns to its default state
Editing view
You can use a simple edit with just a text field if it fits to design space, or display an editing popover or dialog component on click.
