InlineEdit

Text display that opens an editor with save and cancel actions.

Overview

  • Edit a value in place when a separate form would interrupt the surrounding task.

Aliases

editable text, inline rename

When to use

  • Use InlineEdit for short renames, labels, and inline metadata edits.
  • Use multiline mode for concise notes when the edit still belongs in place.

When not to use

  • Do not use InlineEdit for long-form editing or rich text.
  • Do not use it when the edit needs full-form validation and multiple related fields.

Structural parts

read state

display

Non-editing surface that shows the committed value.

active editor

field

Input or textarea that appears while editing.

commit controls

actions

Save and cancel controls for multiline editing.

Public interface

Props
NameTypeDefaultDescription
valuestring—Controlled committed value.
labelstring—Visible label for the inline editor.
descriptionstring—Supporting helper copy.
placeholderstring—Placeholder shown when the value is empty.
disabledbooleanfalseDisables entry into editing mode.
multilinebooleanfalseSwitches the editor into textarea mode.
onChange(detail: { value: string }) => void—Callback fired while the draft changes.
onCommit(detail: { value: string }) => void—Runs when the edit is committed.
onCancel(detail: { value: string }) => void—Runs when editing is canceled.
themeThemeContract—Sets the theme used to resolve component styles.
Events
NamePayloadDescription
change{ value: string }Fires while the draft changes.
commit{ value: string }Fires when the edit is committed.
cancel{ value: string }Fires when the edit is canceled.
Slots
NameDescription
defaultInlineEdit is prop-driven and does not expose slot-based adornments.

Variants, sizes, and states

Variants

  • single-line: Commit on blur or Enter for quick scalar edits.
  • multiline: Save and cancel controls for multiline edits.

Sizes

  • default: InlineEdit uses one compact density tuned for in-place editing.

States

  • display: Committed display state
  • editing: User is actively editing the value

Accessibility

Semantics

  • Associates the control with its visible label, description, and error.
  • Exposes disabled and required semantics through the underlying form control.

Keyboard

  • Supports native focus and text entry behavior.
  • Enter starts editing from the display state, Escape cancels, and multiline mode exposes save and cancel controls.

Screen readers

  • Connects visible label, helper text, and error text to the native control.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-inline-gap
0.45rem

label

--dk-inline-label-color
#16181c
--dk-inline-label-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-inline-label-weight
600

display

--dk-inline-display-bg
#f2f5fb
--dk-inline-display-fg
#16181c
--dk-inline-display-border
#95989d
--dk-inline-display-radius
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
--dk-inline-display-block-size
44px
--dk-inline-display-inline-padding
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-inline-display-font-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

field

--dk-inline-field-bg
#f2f5fb
--dk-inline-field-fg
#16181c
--dk-inline-field-border
#2072e4
--dk-inline-field-radius
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
--dk-inline-field-block-size
44px
--dk-inline-field-inline-padding
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-inline-field-font-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

description

--dk-inline-description-color
#16181c
--dk-inline-description-size
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

actions

--dk-inline-actions-gap
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

Examples

Starter

In-place rename

Click the label to enter editing mode without leaving the page.

<InlineEdit label="Project name" value="Launch roadmap" onCommit={(detail) => saveName(detail.value)} />

Common patterns

Short note editing

Multiline mode provides save and cancel controls.

<InlineEdit multiline={true} label="Release note" value="Add rollout caveats here." />

Edge cases

Locked metadata

Disable the editor when the current user can review but not change the value.

<InlineEdit label="Project name" value="Launch roadmap" disabled={true} />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

default-md

pass

size=md

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, target
  • Evaluated: contrast, target
  • Contrast: 98.5 Lc
  • Target: 44 px