Editable text
@xui/editable-textInline click-to-edit text. Click (or focus + Enter) to edit; Enter or blur confirms, Escape reverts. multiline uses a textarea. Full ControlValueAccessor and [(value)] two-way binding.
Install
pnpm add @xui/editable-text Add the barrel to a standalone component's imports:
import { XuiEditableTextImports } from '@xui/editable-text';
@Component({
imports: [XuiEditableTextImports],
// …
})Examples
Default
Loading preview…
<div class="w-72">
<xui-editable-text class="text-lg font-medium" [(value)]="name" placeholder="Add a name" />
<p class="text-foreground-muted mt-3 text-sm">Value: {{ name }}</p>
</div>Placeholder
Loading preview…
<div class="w-72"><xui-editable-text placeholder="Click to add a title" /></div>Multiline
Loading preview…
<div class="w-96"><xui-editable-text multiline [(value)]="bio" placeholder="Add a bio" /></div>Disabled
Loading preview…
<div class="w-72"><xui-editable-text disabled value="Cannot edit this" /></div>API
Inline click-to-edit text: shows a label until clicked, then swaps to a field. Enter (or blur) confirms, Escape reverts. multiline uses a textarea; there Enter inserts a newline unless confirmOnEnterKey is set.
Variants
editingfalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valuestringThe confirmed text. Two-way bindable with [(value)].''placeholderstringText shown while the value is empty, both in the editor and in its read-only form.''disabledbooleanBlock editing. The value still renders, but clicking it no longer opens the editor.falsemultilinebooleanEdit in a textarea rather than an input. Enter then inserts a newline unless confirmOnEnterKey is set.falseconfirmOnEnterKeybooleanIn multiline mode, whether Enter confirms rather than inserting a newline.falseselectAllOnFocusbooleanSelect the whole value when editing starts.truemaxLengthnumber | nullCap on the number of characters. null for no limit.nullOutputs
confirmedstringEmits the confirmed value.cancelledvoidEmits when editing is abandoned via Escape.editedvoidEmits when editing begins.changedstringEmits the draft on every keystroke while editing.