How this helps marketers

Inline editing provides users with a quick, non-intrusive way to adjust the value of an input in context. It can be used when the form is limited to a single input and the space is limited for a typical form.

 

In-line editing is commonly found in the header of a resource. The input container should change when the user hovers over the component, and clicking anywhere on the input should trigger the focused state of the input.

 

 

Using this pattern

• The input container should flex to fill the available space of the container.

Icon

• 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.

Formatting

• 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.
• When resources are created, a default name is assigned with the format of [Resource type] created on [Day, Month, Year] at [00:00AM/PM]. For example: Template created on Mon, Aug 8, 2022 at 12:54 pm
• 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.

Usability

• Users should be able to use common keyboard shortcuts to navigate through in-line editing.
• If the field is in an active state tapping “Enter” should save the resource name and show a success toast.
• Tapping Esc should cancel edits and revert back to its previous state.

 

Examples

 

Input states

 

Explore alternative CRUD flows using inline edits

While the inline edit function is primarily used in the Page Header and Takeover compositions to name resources, it is encouraged to explore options where an inline edit may replace the need for a disruptive modal dialog or taking the marketer out of context to complete an action.

 

The level of risk involved with the action should be considered as well (renaming a campaign from an index vs changing the campaign’s status from the index).

 

Guidelines

• If the input’s content is cleared, and the input container leaves the editable state, the content should default to the last saved value.
• If the field has a character limit, a tool tip appears below the bottom-right of the input indicating the current character count and limit. See more in character limit guidelines.

 

• Don’t use an inline edit in places where the change would trigger additional actions.
• Don’t require an additional save on top of an inline edit; Inline edits are saved once focus leaves the input.
• Don’t mix inline edits within forms where standard inputs are used.
• If the user does not have access rights to edit the content, static text should be shown. For example, if the marketer can’t edit the name of a campaign, they would not see the edit icon, or interactive states for the inline edit component in the campaign header.

 

Accessibility

• Keyboard Accessibility: the field should be focusable with the Tab key and edit mode should be triggered by pressing the Enter or Space key.
• Comprehensive Screen Reader Support: Utilize ARIA roles, states, and properties effectively to convey the component's state, role, and purpose. This includes marking the editable text with role="textbox" when in edit mode and providing live regions to announce changes in edit status.
• Distinct Visual Focus Indicators: Implement clear and visually distinct focus indicators around the editable element or the trigger element for edit mode.
• Clear and Accessible Labeling: Provide explicit labels for the editable fields, leveraging aria-label if a visible label cannot be provided.

 

Related resources

• Page header
• Takeover
• Character limits