Inline Editable

Inline Editable is an input-based component which when focused, the text can be saved or discarded.


Inline Editable was designed to keep input borders to a minimum when not engaged. The "Save" and "Discard" controls can be disabled using the controls property.

Inline Editable must contain an Input in its default slot.


  • As a more deliberate interaction to change text than a standard Input
  • Situations where text input is not a primary function
  • A title or header for a section of content
  • Content that can have a text change after being submitted


Best practices

Below are important guidelines on using the Inline Editable component.

Correct Inline Editable headers
Do use in situations where inputs would be distracting.
Avoid Inline Editable headers
Avoid using in forms.


Keyboard navigation

TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
EnterWhen editingEnabled is false, enables inline editing.
SpaceWhen editingEnabled is false, enables inline editing.

API reference





Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.