ComponentsEnterpriseInlineEdit

InlineEdit

InlineEdit supports a focused edit-save-cancel cycle without leaving context.

Controlled valueValidationMultiline3 variants3 sizes

Overview

Use InlineEdit for short, low-risk updates where keeping surrounding context is more valuable than opening a form or panel.

Project name

Live preview

Activate the value, edit it, then save with Enter or cancel with Escape.

ProjectName.tsx
tsx
import { InlineEdit } from 'omverse-ui'
 
<InlineEdit
label="Project name"
value={name}
onValueChange={setName}
onSave={updateProject}
validate={(next) => next.trim() ? undefined : 'Enter a project name.'}
variant="outlined"
/>

Anatomy

InlineEdit moves between a readable display and an editor with explicit save, cancel, and validation feedback.

Enterprise migration
Enter a unique project name.12345
  1. 1
    Label

    Names the editable property.

  2. 2
    Editor

    Holds a temporary draft value.

  3. 3
    Save

    Validates and commits the draft.

  4. 4
    Cancel

    Discards the draft and restores the value.

  5. 5
    Validation

    Explains why the draft cannot be saved.

When to use

Use for familiar properties that can be changed safely and understood in place.

Recommended

  • Edit a single property

    Update names, labels, owners, or concise descriptions.

  • Preserve context

    Keep related records and consequences visible.

  • Support fast review

    Make frequent low-risk corrections without navigation.

When not to use

Use a form surface when editing needs several fields, complex guidance, or confirmation.

Avoid

  • Do not edit dependent fields

    Use SidePanel or Dialog for coordinated inputs.

  • Do not hide high-risk changes

    Use an explicit confirmation workflow.

  • Do not edit rich content

    Use a dedicated editor for formatting and attachments.

Variants

Container treatment, size, and editor type adapt InlineEdit to tables, details panels, and descriptions.

Plain

Integrates into an existing details surface.

Outlined

Defines the complete editable region.

Tonal

Distinguishes editable metadata.

Multiline

Supports short paragraph content.

States

Committed and draft values remain separate until validation succeeds.

StateTriggerVisual responseInteraction
DisplayNot editingCommitted value and revealed edit affordanceActivate to edit
EditingEdit beginsFocused field and actionsDraft changes only
InvalidValidation failsError border and messageCorrect or cancel
SavingAsync persistenceProgress in save controlActions disabled
EmptyNo committed valueAdd a value promptActivate to create
DisabledEditing unavailableReduced emphasisCannot enter edit mode

Behavior

InlineEdit owns draft and focus mechanics while applications own persistence, authorization, conflicts, and notifications.

Begin

Entering edit mode copies the committed value into a selected draft.

Commit

Save validates before changing the committed value.

Cancel

Cancel restores the original value without firing change.

Persistence

Saving state can hold controls while remote work completes.

Accessibility

Display and edit modes expose explicit native controls, visible labeling, invalid state, and predictable focus.

KeyAction
EnterSpaceEnters edit mode from the display control.
EnterSaves a single-line draft.
⌘/CtrlEnterSaves a multiline draft.
EscCancels and restores the committed value.
TabMoves among editor, save, and cancel.
  • Provide a visible property label or explicit input label.
  • Give edit, save, and cancel controls specific names.
  • Expose invalid state and connect its message.
  • Do not save automatically when focus moves unexpectedly.
  • Return to a stable control after mode changes.
  • Keep the committed value available outside edit mode.

Content guidelines

Labels, empty prompts, and errors should describe the property and correction precisely.

Name the property

Use its established product label.

ExampleProject name

Prompt empty values

Use Add plus the property.

ExampleAdd an owner note

Explain constraints

State how to make the draft valid.

ExampleEnter a unique project name.

Keep controls direct

Use Save and Cancel accessible names.

ExampleSave changes

Examples

Multiline and saving state support concise descriptions with remote persistence.

Description editor

Live preview
DescriptionEdit.tsx
tsx
<InlineEdit label="Description" value={description} onValueChange={setDescription} multiline saving={mutation.isPending} />

Props / API

InlineEdit extends div attributes and supports controlled committed value and editing state.

Props

PropTypeDefaultDescription
valuestringundefinedControlled committed value.
defaultValuestring''Initial committed value.
onValueChange(value: string) => voidundefinedRuns when committed value changes.
onSave(value: string) => voidundefinedRuns after validation when save is requested.
onCancel() => voidundefinedRuns when the draft is cancelled.
editingbooleanundefinedControlled editing state.
defaultEditingbooleanfalseInitial uncontrolled editing state.
onEditingChange(editing: boolean) => voidundefinedRuns when editing state changes.
labelReactNodeundefinedVisible field label.
emptyTextReactNode'Add a value'Text shown for an empty committed value.
validate(value) => ReactNode | undefinedundefinedReturns validation feedback.
multilinebooleanfalseUses a multi-line editor.
disabledbooleanfalsePrevents editing.
savingbooleanfalseShows asynchronous save progress.
variant'plain' | 'outlined' | 'tonal''plain'Controls container treatment.
size'sm' | 'md' | 'lg''md'Controls spacing and editor scale.