Editable

Editable switches between a preview and a text input. It keeps draft and committed values separate and supports native forms.

Use Editable for in-place text editing. Use Input for a control that stays editable.

Anatomy

• #preview: Replaces preview content. Receives the committed value, empty state, and edit action.
• #edit: Content inside the generated edit button.
• #submit: Content inside the generated submit button.
• #cancel: Content inside the generated cancel button.
• #state: Optional renderless state output with committed value, draft, edit state, and actions.

The component generates preview/input and action controls so their keyboard and form behavior stays connected. Style them with the matching ui keys.

Usage

<script setup lang="ts">
import { Editable } from "akaza-ui";
import { ref } from "vue";

const title = ref("Quarterly planning notes");
</script>

<template>
  <Editable
    v-model="title"
    activation-mode="click"
    submit-mode="none"
    select-on-focus
  />
</template>

Examples

Activation mode

Choose when the preview enters edit mode. focus is keyboard-friendly and is the default. dblclick avoids accidental pointer edits, while none leaves activation to the generated edit button or exposed edit() method.

<template>
  <Editable v-model="title" activation-mode="dblclick" />
</template>

Submit and cancel

submitMode controls automatic submission. Escape always cancels. In multiline mode, Ctrl+Enter or Cmd+Enter submits when Enter submission is enabled.

<template>
  <Editable v-model="summary" multiline submit-mode="both" />
</template>

Explicit submission

Set submitMode="none" when only the generated submit button or exposed method should commit the draft.

<template>
  <Editable v-model="slug" activation-mode="none" submit-mode="none" />
</template>

Field and form integration

Inside Field, Editable inherits id, name, required, disabled, and description metadata. Its hidden native control submits only the committed value.

<template>
  <Field label="Release title" name="title" required>
    <Editable v-model="title" />
  </Field>
</template>

Custom preview

The preview slot exposes an explicit action. Keep interaction on the generated preview button; only replace its content.

<template>
  <Editable v-model="title">
    <template #preview="{ value, isEmpty }">
      <strong>{{ isEmpty ? "Add a title" : value }}</strong>
    </template>
  </Editable>
</template>

Native Form Reset

A native form reset restores the initial model and clears interaction state. Calling preventDefault() on the reset event preserves the current value. Reset updates v-model without emitting value-change.

API Reference

Model

Props

Emits

Slots

Methods

UI Options

Styling Hooks

Plain class applies to the root wrapper. Use ui.input for the editable control.

Keyboard