#InlineEdit

Turns a displayed value into its own editor, so a reader can correct one field without opening a form — reach for a form when several values change together. Every story composes it inside an Attribute, because that is what keeps the read and edit states the same height and stops the row jumping on toggle.

Source · Storybook

#Usage

import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';
import { InlineEdit, InlineEditControl, InlineEditError, InlineEditInput, InlineEditPreview } from '@wallarm-org/design-system/InlineEdit';

#Examples

#Number editor

InlineEditNumber for a numeric field, with the steppers available while editing and gone again once committed.

#Textarea editor

For a value long enough to wrap. lineClamp on the preview keeps the row short in read mode and lets the editor grow past it.

#Select editor

InlineEditSelect for a value from a known set. Its children are ordinary Select parts, so the menu behaves exactly as it would standalone.

#Multi select editor

The same editor with multiple, for a value that is genuinely a list rather than one choice.

#Tags editor

A multi-select whose committed value reads as Tag chips, which suits a list the reader scans rather than one they read as a sentence.

#Date editor

InlineEditDate hosts a Calendar, so the editor is a popover rather than a field — the row stays the same height while it is open.

#Time editor

InlineEditTime for a time of day, taking the same value objects as TimeInput.

#Date time editor

Date and time in one editor, for a value where the pair only makes sense together.

#Horizontal layout

InlineEdit inside a horizontal Attribute — label on the left, value/editor on the right. The orientation belongs to Attribute, not here: InlineEdit has no orientation prop and behaves identically either way.

#States

The three async states side by side. saved is transient and clears itself after savedDuration, so it is pinned here to be looked at.

#Async

A commit that returns a promise. The field stays in edit mode until it resolves, and a rejection keeps the reader's text rather than discarding it.

#Non editable

readOnly and disabled are different answers: read-only shows the value plainly with no affordance, disabled says there is a control here that you cannot use.

#Confirm commit

onBeforeValueCommit intercepts the commit — return false, or a promise of it, to hold the field open. Use it where the change is consequential enough to confirm, not for validation, and short-circuit unchanged values: the guard fires on every commit path, no-op submits included.

#Props

#InlineEditControl

#InlineEditError

#InlineEditInput

#InlineEditNumber

#InlineEditPreview

#InlineEditPreviewValue

#InlineEditSelect

#InlineEditTextarea

#InlineEditTime

#Explorer