Ui3nEditable

Inline editable text component. Click on the text to enter edit mode, press Enter or click the checkmark to confirm, press Escape or click the cross to cancel.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name	string | undefined	—	HTML name attribute for form submission
modelValue*	string	—	Current value of the editable content
placeholder	string | undefined	—	Placeholder text
maxLength	number | undefined	—	Maximum length of the text
maxWidth	string | number | undefined	—	Maximum width of the component
tooltipWidth	number | undefined	—	Tooltip width
disabled	boolean | undefined	—	Component disabled flag
selectAllOnFocus	boolean | undefined	—	Flag for automatic selection of all text on focus
disallowEmptyValue	boolean | undefined	—	Flag to prevent empty values

Events

Event Name	Arguments / Value Type	Description
update:modelValue	value: Nullable<string>	—
done		—
cancel		—
focusin	value: FocusEvent	—
focusout		—
toggle:editMode	value: boolean	—

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-editable-border-radius	4px
--ui3n-editable-button-size	16px
--ui3n-editable-font-size	12px
--ui3n-editable-height	24px
--ui3n-editable-max-width	100%
--ui3n-editable-min-width	60px

Usage Examples

Basic usage

Basic usage

Click on the text to enter edit mode. Press Enter to confirm or Escape to cancel.

Editable text

Current value: Editable text

Disallow empty value

Disallow empty value

Using disallowEmptyValue prop prevents saving an empty value. The input border turns red when the value is empty.

Required field

This field cannot be empty (disallowEmptyValue)

Disabled state

Disabled state

Disabled component does not allow entering edit mode.

Disabled field

Disabled state — editing is not available