CleenUI · Data Display · EditableCard

EditableCard

In-place-editable card — click to edit, blur or commit to save.

storybook.cleenui.com · data-display-editablecard--default
Open in new window

About EditableCard

EditableCard renders content in display mode by default. Click on it (or the explicit edit-button slot) and the same area becomes editable. Blur or hit the commit button to save; ESC reverts to display mode.

The component tracks dirty state and exposes events for save, cancel, and discard. Form-field validation runs on save attempts to prevent invalid commits.

When to use it

  • Inline-editable settings and preferences.
  • Editable cell groups in detail views.
  • Quick-edit blocks in admin tooling.
  • Bio and profile field editing.

Common props

Prop
Type
Description
value
any
Current value (controlled).
renderDisplay
(value) => ReactNode
Display-mode renderer.
renderEdit
(value, onChange) => ReactNode
Edit-mode renderer.
onSave
(value) => Promise<void>
Async save handler.
validate
(value) => string | undefined
Validation function returning an error message.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with