Theme:
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 | — |
Usage Examples
Basic usage
Basic usage
Click on the text to enter edit mode. Press Enter to confirm or Escape to cancel.
Disallow empty value
Disallow empty value
Using disallowEmptyValue prop prevents saving an empty value. The input border turns red when the value is empty.
Disabled state
Disabled state
Disabled component does not allow entering edit mode.