IEditable ​

Text that becomes a field where it sits. For changing one value in place, when opening a form or a dialog to edit a single line is more ceremony than the change deserves.

<script setup lang="ts">
const title = ref('Q3 revenue report')
</script>

<template>
  <IEditable v-model="title" />
</template>

Click it, or Tab to it and start typing. Enter or clicking away commits; Escape puts the old value back.

It does not become a form field when you edit it — no border, no box, just a caret in the text. The only chrome is a tint on hover, and only because a value that looks exactly like its surroundings is a value nobody knows they can change.

Make it look editable ​

The one real risk with this control is that nobody realises it is one. It hints on hover, but a hint under the pointer does nothing for a reader who never puts a pointer there.

controls adds a pencil beside the value, and save and cancel while editing — one set at a time, never all three.

<IEditable v-model="note" controls />

Use them anywhere the value is not obviously a field: a heading, a table cell, a line of prose. Skip them in a settings list where every row is already visibly editable.

Empty values ​

A placeholder keeps an empty value clickable. Without one there is nothing to aim at.

<IEditable v-model="nickname" placeholder="Add a nickname" controls />

startWithEditMode opens straight into the field — right for a row that was just added and has nothing in it yet.

When it commits ​

submitMode decides what counts as done: both (the default) on Enter or on losing focus, blur or enter for one of the two, none for only the save button.

activationMode decides what starts an edit. focus is the default and the kindest — dblclick is invisible to anyone who does not already know it is there, and unreachable from a keyboard.

<IEditable v-model="guarded" submit-mode="none" controls />

submit-mode="none" is the one to reach for when a stray click should not change anything: an environment name, a billing address, anything where a silent commit is expensive.

In a table ​

The case this control is really for — a list where any row's name might need a small correction, and a dialog per row would be absurd.

<ITable :columns="columns" :rows="rows">
  <template #cell-name="{ row }">
    <IEditable v-model="row.name" size="sm" />
  </template>
</ITable>

size sets the text size, and both states share it — a row keeps its height whether it is being read or edited.

Custom preview ​

The preview slot replaces how the value reads — a heading, a badge, anything — while the field it becomes stays the same.

<IEditable v-model="title" size="lg">
  <template #preview="{ value }">
    <span class="text-lg font-semibold">{{ value }}</span>
  </template>
</IEditable>

Both states inherit their typography from whatever surrounds them, and the field sizes itself to its text, so the line does not move when the two swap — an inline edit that shifts the text it replaces makes the reader lose their place.

Props ​

Events ​

Slots ​