Skip to content



InlineEdit is a wrapper component that enables a smooth transition between viewing and editing data.

Use this component when:

  • You need to effortlessly switch between read-only and text editing modes without requiring a page reload.
  • The interface is spatially constrained, necessitating efficient use of space.
  • Transmitting data to the system isn't the primary focus of the interface (for example, providing supplementary information and notes within cards).


It's important to note that the example below serves merely as an illustration and isn't the default configuration. Any control component, whether it's a Button, an Icon, or text with an icon, can be utilized as a trigger.

The placeholder's color aligns with that of a typical input element, utilizing the variable --text-placeholder. The text and icon share an active zone.


  • The user clicks the trigger, which opens an input field.
  • The input field gains immediate focus.
  • The user inputs data and can choose to save it. Alternatively, the user can revert to view mode by using the cancel button or the Esc key.
  • When the input field loses focus (for instance, if the user switches to another screen), the onBlur event preserves the entered value.

Below is an example demonstrating how this component functions with one of the possible triggers.

InlineEdit states
StateAppearance exampleStyles
NormalThe placeholder's color matches that of a default input --text-placeholder.
HoverThe cursor changes to a pointer. The icon's color shifts to the darker one with CSS filters.
FocusDisplay the input type required for data entry (normal, textarea, select, color-picker, time-picker, for example).
Entered dataText color changes to --text-primary.
Entered data with hoverThe cursor changes to a pointer. The interactive trailing addon's color shifts to the darker one with CSS filters.


The transition between the wrapped trigger and the input field can be accomplished with an ease-in-out effect lasting 50ms.

UX/UI use

In view mode, ensure that the text size matches the size of the edit input you've selected.

For instance, if the heading you wish to edit employs a font size of 24px, maintain the same font size of 24px when transitioning to edit mode.

Released under the MIT License.

Released under the MIT License.