Inplace Editor
Edit text directly inline — click to switch between display and edit mode without navigating to a separate form.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <InplaceEditor />
When to Use
- Inline editing where users click text to edit it directly in place
- Quick updates to titles, names, or status fields without opening a modal
- Editable table cells or list items for rapid data entry
- Settings panels where values should be editable with minimal friction
John Doe
Value: John Doe
A software engineer who loves clean code.
Active
Selected: Active
This value is locked
Switch EditMode to see how the edit control changes when you click to edit.
Sample value
Value: Sample value
API Reference
InplaceEditor
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string? | — | The current text value. Supports two-way binding. |
| EditMode | InplaceEditMode | Text | Controls the edit control: Text, Textarea, or Select. |
| SelectOptions | List<string>? | — | Option list when EditMode is Select. |
| Placeholder | string? | — | Hint shown when value is empty. |
| ShowButtons | bool | false | Show checkmark (save) and X (cancel) action buttons. |
| SaveOnBlur | bool | true | Automatically save when the input loses focus. |
| SaveOnEnter | bool | true | Save when Enter is pressed. |
| Disabled | bool | false | Prevent editing. |
| OnSave | EventCallback<string> | — | Fired when the value is saved. |
| OnCancel | EventCallback | — | Fired when editing is cancelled. |
| ChildContent | RenderFragment? | — | Custom display content shown in view mode. |
| ValueChanged | EventCallback<string?> | — | Two-way binding callback; fires when the value is saved. |
| Required | bool | false | Marks the field as required for form validation. |
| Invalid | bool | false | Applies a destructive ring to indicate a validation error. |
| ErrorText | string? | null | Error message shown below when Invalid is true (standalone, not inside FormField). |
| HelperText | string? | null | Help text shown below when there is no error (standalone, not inside FormField). |
| Label | string? | null | Inline label rendered above the editor (standalone, not inside FormField). |
| Name | string? | null | HTML name attribute for form identification. |
| FormField | FormFieldContext? | null | Cascaded context from a parent FormField; drives validation state automatically. |