Flux

Inline edit ​

The inline edit displays a value that turns into an input when clicked, letting users edit it in place. It is well suited for editable fields in detail panels and tables. Editing commits on Enter (or ⌘/Ctrl + Enter in multi-line mode) and reverts on Escape.

Cancelling (through Escape or the cancel control) takes precedence over save-on-blur, so the draft is never persisted when the user explicitly cancels, even though leaving the field moves focus. After editing closes, focus stays within the component rather than dropping to the document body.

Project Apollo

Required icons

check
xmark

Props

model-value: string
The value being edited.

disabled?: boolean
Whether editing is disabled.

error?: string | null
An error message shown on the input while editing.

is-readonly?: boolean
Whether the value is read-only and cannot be edited.

multiline?: boolean
Whether to edit with a multi-line text area instead of a single-line input.

placeholder?: string
Placeholder shown when the value is empty.

save-on-blur?: boolean
Whether the value is saved when the input loses focus. Moving focus to the component's own save or cancel control (for example by keyboard) does not trigger an auto-save, so an explicit cancel still wins.
Default: true

Emits

update:model-value: [string]
Triggered when the edited value changes.

cancel: []
Triggered when editing is cancelled.

edit: []
Triggered when editing starts.

save: [string]
Triggered when the value is saved, with the new value.

Slots

default
Custom display content. Receives the current value and an edit function.

actions
Custom save/cancel actions. Receives save and cancel functions.

Examples ​

Basic

A basic inline edit field.

Add a title...

<template>
    <FluxInlineEdit
        v-model="value"
        placeholder="Add a title..."/>
</template>

<script
    setup
    lang="ts">
    import { FluxInlineEdit } from '@flux-ui/components';
    import { ref } from 'vue';

    const value = ref('');
</script>

Multi-line

An inline edit field that edits with a text area.

A short description that you can edit in place.

<template>
    <FluxInlineEdit
        v-model="value"
        multiline
        placeholder="Add a description..."/>
</template>

<script
    setup
    lang="ts">
    import { FluxInlineEdit } from '@flux-ui/components';
    import { ref } from 'vue';

    const value = ref('A short description that you can edit in place.');
</script>

Used components ​