Overview

In-line editing provides users with a quick, non-intrusive way to adjust the value of an input in context. In-line editing is commonly found in the header of a resource.

Inline edit components appear as a basic text element, until they are hovered—which the marketer can activate the editing mode by clicking or double-clicking on the content, which transforms into an editable input field.

Design

• The input container should flex to fill the available space of the container.
• The full container should be clickable to trigger the editable state.
• Pressing Enter saves the value, pressing Esc reverts the value to it’s previous state
• In-line editing inputs always include a trailing edit icon when in inactive and hovered states. When using this pattern, the entire default state should be clickable, not just the edit pencil icon.

Sizes

• H3: used in page headers when the page is dedicated to a specific resource (campaign, template, Journey, snippets)
• Body: can be used in places where the inline edit input is near other inputs and forms or text of the same size.

• H3 has a border radius of 6px / ${borderRadius.threeEights}
• Body has a border radius of 4px / ${borderRadius.quarter}

 

States

 

Guidelines

Use cases

• Use the Inline Edit component in interfaces where users need to quickly edit content without leaving the current page or screen.
• Implement the component in content management systems, dashboards, or data tables where real-time editing is required.

 

Content

• The format of the text in the input container should inherit the styles and properties of the inactive state. For example, if the inactive state uses the H4, the H4 styling should remain as the input changes states.
• If the name of the resource is cleared, and the input container leaves the editable state, the resource name should default to the last saved value.
• When an item is created (campaign/journey/template), a default name is assigned with the format of [Item type] created on [Day, Month, Year] at [00:00AM/PM].

Example

Accessibility

• Users should be able to use common keyboard shortcuts to navigate through in-line editing.
• If the field is in an active state, pressing Enter should save the resource name and show a success toast.
• Pressing Esc should cancel edits and revery back to its previous state.
• Use semantic HTML elements and appropriate ARIA attributes to enhance screen reader compatibility and provide context for the Inline Edit component.
• Ensure that keyboard navigation is supported, allowing users to activate the editing mode and make edits without relying solely on mouse interactions.

 

Health