Inline editing can replace a traditional form when the user only needs to update a few fields among many available parameters.
In a horizontal list, you can adjust the column width of the parameter name and set it to either a fixed or relative value.
Parameters should never appear as blank in view mode. Instead, use placeholder text to signal that a field can be edited.
By default, the system displays “Not filled”, but it’s better to use contextual messages for clarity. Examples:
For fields without labels, the placeholder can include the field name, e.g., Description: Not provided, Operator: Not set, Incident type: Not defined.
Exiting edit mode attempts to save changes. If the new value is invalid, the system displays an error message, highlights the field, and keeps focus in the input.
When certain characters are always invalid (e.g., letters in an IP address), block their input directly. Prevented characters do not appear, and a yellow tooltip explains why.
If the user clears a value, you can substitute either a default value or the last valid entry to avoid errors.
The component owns the loading state: it closes the editor, keeps the timings, updates its own status and remembers the last saved value. Connect the stream of the request to the saveHandler property for that.
View mode renders the control's value: the editor closes before the server answers.
If the value still equals the one the editor opened with, no request is sent. compareWith decides that: the default compares with ===, which suits text and numbers, so bind your own for arrays and objects, or null to send every time. A failed save is always retried.
The request outlives the field — removing the row doesn't cancel it. Provide KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER in the root injector if a failure has to be reported after that, because the saveError output goes away with the view.
If the server responds within 100 ms, don't show a loading indicator. Otherwise, the field in view mode switches to the Progress state for at least 300 ms to avoid flickering. Edit mode cannot be reopened while the request is in flight.
The value's background turns into the error color and stays that way until the user reacts. The entered value is kept in the field.
The message is shown by the application: set the shared reaction with the KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER token, override it for a single field with the saveErrorHandler property, or subscribe to the field's saveError output. The handler receives the error and the field itself, with its retrySave(), toggleMode() and rollback() actions.
The message doesn't hide on a timeout, and closing or dismissing it discards the unsaved value.
Cancelling the editor doesn't clear the failed state: the value is still the one the server refused, so the field stays marked until the save succeeds or rollback() discards it.
When the server rejects part of the value rather than all of it, match the rejected items against what view mode shows and mark only those.
On hover or focus, an action button or menu can appear on the right side of the field, offering options such as:
These actions are visually separated from the main value and placed in the top-right corner. When the menu is open, both the highlight and the icon remain visible.
Inline-editable elements should remain aligned with their appearance in view mode. Do not account for extra padding or spacing that may appear when the element is hovered, focused, or in edit mode.
On selection, open only the dropdown menu — don't show a bordered input field like Select's. The field doesn't need a border of its own, the dropdown alone is enough.
After picking an option, the field returns to view mode.
Sometimes it's worth making the dropdown options multiline. It's recommended to match the dropdown's width to the field's width.
Place the clear element inside the dropdown menu — since the select field itself isn't visible, there's no other suitable place for a reset button.
Also recommended: add an option whose label makes it clear that no value is set. This echoes the wording used for the empty field in view mode.
After picking an option, the field returns to view mode.
Inline edits should be saved immediately after a change—without requiring a global Save button.
Avoid using inline editing when:
Alternatives to inline editing: