Skip to main content

Inline edit

Edit text content directly on the page without navigating to a different page or form.

You can use two types of inline edit: single-field and text-area.

View in StorybookExternal link icon

Usage​

  • Use to enable users to edit text content quickly.

Behavior​

  • Clicking on the text you want to edit activates the edit mode in Inline edit––allowing you to update the content.
  • Once activated, Inline edit displays action buttons for saving or discarding changes.
  • Once you save your changes, the edited content updates in real-time on the page.
  • By default, clicking outside saves changes. In some cases, this logic can be modified to discard changes once clicked outside.
  • You can use a “placeholder” variant when the use case allows for an empty state.

Best practices​

  • When dealing with complex or large amounts of data that require more than just text inputs, consider using a Popover, Modal, Side Modal, or a separate Edit page instead of the Inline Edit component.
  • Avoid overloading users with a large number of Inline edits on one page. Instead, use the alternative methods mentioned above.