InlineEdit

InlineEdit is a click-to-edit field. It shows a value in read mode; clicking it switches to an inline input with confirm and cancel controls.

ExamplesCodeUsageChangelog

Basic

Jane Smith

Tailwind v4

<script setup>
import { ref } from 'vue'
const name = ref('Jane Smith')
</script>

<InlineEdit v-model="name" />

With label

Company name

Acme Corp

Tailwind v4

<InlineEdit v-model="company" label="Company name" />

Empty placeholder

Enter a value…

Tailwind v4

<InlineEdit placeholder="Enter a value…" />

Disabled

Read-only field

Jane Smith

Tailwind v4

<InlineEdit v-model="name" label="Read-only field" disabled />

Keyboard shortcuts

• Enter — confirms the edit
• Escape — cancels without saving

Props

Prop	Type	Default	Description
modelValue	string	—	The current value
label	string	—	Optional label displayed above the field
placeholder	string	'Click to edit'	Shown when value is empty
isRequired	boolean	false	Marks the input as required
disabled	boolean	false	Prevents editing
editButtonLabel	string	'Edit'	aria-label for the pencil icon

Emits

Event	Payload	Description
update:modelValue	string	Fired when the user confirms an edit