Editable

Usage

Editable shows saved text until editing begins. Typing changes an internal draft; v-model updates only when you save. Cancel restores the saved text. It fills the available width; constrain it with a class when needed.

<script setup lang="ts">
const title = ref('Website refresh')
</script>

<template>
  <SEditable v-model="title" aria-label="Project name" />
</template>

Activation and submission

activationMode="focus" starts editing when the preview receives focus or is clicked. dblclick requires a double click, or Enter/Space when focused. none turns off preview activation; the edit control, exposed edit() method, or v-model:editing can still start editing.

Save and Cancel controls remain available in every mode. Escape cancels. Moving focus between the editor and its built-in controls does not submit. IME confirmation does not save text.

External controls and programmatic editing

Use v-model:editing to control editing from a toolbar or menu. Setting it to true opens and focuses the editor; setting it to false discards the draft. Call submit() to save before closing, rather than setting editing to false.

This example disables automatic activation and built-in controls. Use submit-mode="none" for external Save/Cancel buttons, so leaving the input to click Cancel does not save through a blur event first.

<script setup lang="ts">
const title = ref('Design system')
const editing = ref(false)
const editable = useTemplateRef('editable')
</script>

<template>
  <SButton v-if="!editing" @click="editing = true">
    Rename
  </SButton>
  <template v-else>
    <SButton @click="editable?.submit()">
      Save
    </SButton>
    <SButton @click="editable?.cancel()">
      Cancel
    </SButton>
  </template>
  <SEditable
    ref="editable" v-model="title" v-model:editing="editing"
    activation-mode="none" submit-mode="none" :controls="false"
    aria-label="Project name"
  />
</template>

Multiline

multiline renders a textarea. Enter adds a new line; Ctrl/Cmd+Enter saves when submitMode includes Enter. Escape still cancels. rows defaults to 3.

Forms, validation, and states

FormField supplies the label, id, descriptions, name, size, and invalid state. Without FormField, provide an aria-label or aria-labelledby. When name is set, native form data contains the saved value, never an unsubmitted draft.

required, maxLength, and native attributes such as minlength and pattern apply to the editor. Saving checks native validity and keeps invalid drafts open for correction. invalid changes the visual state; it does not add a validation rule. Native attributes and input event listeners reach the editor.

disabled and readonly prevent editing and discard an active draft. loading blocks typing and actions while retaining the draft. Updating modelValue externally replaces both saved text and any current draft.

Custom content and controls

The preview slot replaces the saved-text display; the default slot is its fallback. Keep interactive elements outside the preview button. The controls slot receives the current saved value, draft, editing/disabled state, and edit, submit, and cancel functions.

Customization

size accepts sm, md, and lg. color sets the editor focus color and Save button color; invalid fields use the danger focus color. Global or scoped theme configuration supports defaults.editable and ui.editable; per-instance ui overrides individual slots. editIcon, submitIcon, and cancelIcon override the controls. editLabel, submitLabel, and cancelLabel override their accessible text.

Global icon keys are edit, check, and close. Message keys are edit, save, cancel, editableInput, and editablePlaceholder.

Props

Events

Slots

All slots receive { value, draft, editing, disabled, edit, submit, cancel }.

Exposed methods