UI
← Home

Inline Edit

A rename-style inline edit: a control showing the current value that becomes a focused text field — with its text pre-selected — when activated. Enter or blur commits the new value; Escape cancels and restores the original.

  • Axe
  • Focus
  • Rename

Preview

Installation

npx shadcn@latest add https://ui.publictheta.com/r/inline-edit.json

Conformance

Verified against the @publictheta/ui-spec inline-edit specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Rename — F2 opens an editor over the value with its text selected; Enter or a blur commits, Escape puts the old name back, Ctrl/Cmd+Z takes the rename back — announced, and reachable by a control as well as by the key

See the full conformance matrix across all components.