Editable

SEditable shows a value as plain text and turns it into an input in place. It is built on Reka UI (activation, commit and cancel, the hidden input for native form submission) and reuses SFormField (label, hint, error message, a11y) and SButton for the optional controls. The value is bound with v-model.

Prefer it to an always-visible field when the value is mostly read and rarely corrected — a document title, a name in a list row, a cell in a table — so the page reads as content instead of as a form. When the value is meant to be filled in, use SInput: a field that announces itself is easier to find and to fill.

The box never changes size between the two states: the frame, its padding and its border width stay the same and only the colors change, so nothing on the page moves when editing starts.

Keyboard and screen readers. The value is a tab stop. With the default activation-mode="focus" reaching it opens the editor; in dblclick mode press Enter or Space (or double-click). Enter commits the value, Escape discards the edit, and focus returns to the value afterwards instead of falling to the page. The input carries the field label, so it is announced like any other field; with with-controls the buttons give assistive technology and touch users an explicit affordance, which a double click alone does not.

Basic usage

Tab into the text or click it: the value becomes an input with the same box. Enter or clicking away commits it, Escape restores it.

Report title

Quarterly report

Click the title to rename it

<script setup lang="ts">
import { ref } from 'vue'

const title = ref('Quarterly report')
</script>

<template>
  <SEditable
    v-model="title"
    label="Report title"
    hint="Click the title to rename it"
  />
</template>

With controls

with-controls adds the edit, save and cancel buttons. Their accessible names come from the locale dictionary and can be replaced one by one (edit-label, save-label, cancel-label); the controls slot replaces the whole row and receives { isEditing, edit, submit, cancel }.

Nickname

Not set

<template>
  <SEditable
    v-model="nickname"
    label="Nickname"
    placeholder="Not set"
    with-controls
    activation-mode="none"
    submit-mode="none"
  />
</template>

Activation and commit

activation-mode decides what opens the editor: focus (the default), dblclick or none — with none only the controls and the exposed edit() do. submit-mode decides what commits the value: enter, blur, both (the default) or none, where leaving the field discards the edit. Escape cancels in every mode.

Double click to edit

Call back on Monday

Read-only

Call back on Monday

Disabled

Call back on Monday

<template>
  <SEditable
    v-model="note"
    label="Double click to edit"
    activation-mode="dblclick"
    submit-mode="enter"
  />
  <SEditable
    :model-value="note"
    label="Read-only"
    readonly
  />
  <SEditable
    :model-value="note"
    label="Disabled"
    disabled
  />
</template>

As a title in a card

Without a label the field is just the text, which is what a card heading or a list row needs. auto-resize makes the box follow the text instead of the row, size sets its type scale, and the preview slot renders the value however the row needs it.

Design system

Draft

Q3

Internal

<template>
  <SCard>
    <SEditable
      v-model="cardTitle"
      aria-label="Project name"
      auto-resize
      placeholder="Untitled project"
      size="lg"
    />
    <SEditable
      v-for="(tag, index) in tags"
      :key="index"
      v-model="tags[index]"
      aria-label="Tag"
      auto-resize
      size="sm"
    >
      <template #preview="{ value }">
        <SBadge>{{ value }}</SBadge>
      </template>
    </SEditable>
  </SCard>
</template>

Validation

rules checks the value when focus leaves the field, and then on every change while the error is shown; inside SForm the field is also checked on submit, and the form moves focus to it — to the text when the editor is closed, to the input when it is open. name adds the value to native form submission. See the Validation guide for the details.

Submit with an empty name, then type one.

Project name*

Click to name the project

<script setup lang="ts">
import { ref } from 'vue'
import { maxLength, required } from '@smalt-ui/core'

const projectName = ref('')
const saved = ref(false)
</script>

<template>
  <SForm @submit="saved = true">
    <SEditable
      v-model="projectName"
      label="Project name"
      name="project"
      placeholder="Click to name the project"
      required
      :rules="[required(), maxLength(40)]"
    />
    <SButton type="submit"> Save project </SButton>
  </SForm>
</template>

API

Props

Name	Type	Default	Description
id	string	undefined	Field id. Generated automatically when not set (SSR-safe).
label	string	undefined	Field label (linked to the input via for/id).
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Explicitly marks the field invalid (in addition to error).
required	boolean	false	Marks the field as required: adds * to the label, aria-required to the input and required to the hidden form input (rendered inside a <form> when name is set). The input itself carries no native required: it is hidden outside the edit view, and a hidden invalid control would stall the submit instead of pointing at anything.
placeholder	string	undefined	Text shown instead of an empty value, in the preview and as the input placeholder. Consumer content: it is not taken from the locale dictionary.
size	"md" | "sm" | "lg"	"md"	Field size: sm (32px), md (40px) or lg (48px).
disabled	boolean	false	Disables the field: the value stays visible but the editor never opens.
readonly	boolean	false	Read-only field: the value is visible and selectable, but the editor never opens.
square	boolean	false	Square corners: removes the field border radius (rounded by default).
activation-mode	| "none" | "focus" | "dblclick"	"focus"	What opens the editor: focus (entering the preview with Tab or a click), dblclick (a double click) or none (only the controls and the exposed edit()). Enter and Space on the focused preview open it in every mode but none.
submit-mode	| "none" | "blur" | "both" | "enter"	"both"	What commits the value: enter (the Enter key), blur (focus leaving the field), both (the default) or none — with none the value is committed only by the submit control or the exposed submit(), and leaving the field discards the edit. Escape always cancels.
max-length	number	undefined	Maximum number of characters accepted by the input.
auto-resize	boolean	false	The field takes the width of its value instead of the whole row: the value and the input share one grid cell. Typing does not widen the box — the input scrolls, as any field does.
select-on-focus	boolean	false	Selects the whole value when the editor opens, so typing replaces it.
start-with-edit-view	boolean	false	Opens the editor on mount, with the input focused.
with-controls	boolean	false	Renders the edit, save and cancel buttons next to the value.
edit-label	string	undefined	Accessible name of the edit button (defaults to the locale dictionary).
save-label	string	undefined	Accessible name of the save button (defaults to the locale dictionary).
cancel-label	string	undefined	Accessible name of the cancel button (defaults to the locale dictionary).
aria-label	string	undefined	Accessible name of the input, for a field rendered without a label.
name	string	undefined	Name of the value in native form submission: renders a hidden input inside a <form>.
rules	readonly	undefined	Validation rules: functions of the value that return true or the error text, run in order until the first failure. See Validation.
validate-on	"blur" | "input" | "submit"	undefined	When the field checks its rules: blur (after the user leaves the field, then on every change while an error is shown), input (on every change) or submit (only on form submission and validate()). Overrides validate-on of SForm; blur by default.
model-value	string	""	The committed text value. Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	(value: string) => void	Emitted when modelValue changes. Used for two-way binding (v-model).
cancel	() => void	Editing has been dropped (Escape or the cancel control); the value is unchanged.
blur	(event: FocusEvent) => void	Focus left the field. Moving between the value and the controls does not count.
submit	(value: string) => void	The value has been committed; carries the new value.
focus	(event: FocusEvent) => void	Focus entered the field. Moving between the value and the controls does not count.
edit	() => void	The editor has been opened.

Slots

Name	Description
preview	The value as it is shown at rest, instead of plain text. Receives { value, isEditing }; the placeholder is drawn by the field itself when the value is empty.
controls	Replaces the default row of buttons (with-controls). Receives { isEditing, edit, submit, cancel }.