# Inplace Editor

Source: https://lumeo.nativ.sh/components/inplace-editor

# Inplace Editor

Edit text directly inline — click to switch between display and edit mode without navigating to a separate form.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Basic Inplace Edit

John Doe

Value: John Doe

Preview Code

With Save / Cancel Buttons

Senior Engineer

Preview Code

Textarea Mode

A software engineer who loves clean code.

Preview Code

Select Mode

Active

Selected: Active

Preview Code

Disabled

This value is locked

Preview Code

EditMode — interactive preview

Switch EditMode to see how the edit control changes when you click to edit.

Text Textarea Select

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.

## Related Components

-   [Input](/components/input) — Standard text input for form-based editing
-   [Form](/components/form) — Full form layout with validation for more complex editing scenarios
-   [DataGrid](/components/datagrid) — Data grid with built-in inline editing for tabular data