InlineEdit

InlineEdit is a wrapper component for switching between viewing and editing data.

Use this component when:

• you need to switch between view-only and text editing without reloading the page (for example, edit the title, description or tag);
• data in the interface is placed tightly, you need to save space;
• transferring data to the system is not the main task of the interface (for example, additional information and notes in cards).

The component consists of:

• wrapper over an input;
• trigger (it can be any necessary component - text or tag, for example);
• input of any type.

Note that the example below is just an example. It's not a default variant. Any control component can be used as a trigger - a button, an icon, text with an icon.

The color of the placeholder is the same as a regular input has - --text-placeholder. Text and icon has one active zone.

• The user has clicked a trigger that opens an Input.
• Input immediately receives focus.
• The user enters data. Either saves the data, or using the cancel button / Esc key returns from edit mode to view mode.
• When focus is lost (for example, the user is distracted by another screen), onBlur persists the entered value.

Below you can see an example of how such a component works with one of the possible triggers.

The transition between the wrapped trigger and the input can be done with an ease-in-out of 50ms.

In view-mode, set the text size to the same size as the edit input you selected.

For example, if the heading you need to edit has 24px font-size, then it should also be 24px when you enter edit mode.