Flux

Inline edit ​

The Inline edit component 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.

Project Apollo

Required icons

check
xmark

Props

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.
Default: true

Emits

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 ​