Use for inline editing of data that is normally displayed as read-only.
The q2-editable-field element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.
blockIf true, component expands to fill the width of its parent element.
disabledDisables the edit button and field.
editingControls the edit state of the element.
errorsDetermines the errors applied to the q2-input element.
See q2-input for more information.
formatModifierformat-modifierDetermines the formatModifier applied to the q2-input element.
Only applicable when type="currency".
See q2-input for more information.
hideLabelhide-labelHide's the field's <label> element from view.
hintsDetermines the hints applied to the q2-input element.
See q2-input for more information.
labelThe visible descriptor for the element.
Serves as the input label while in the edit state and as a decorative label for the read state when persistentLabel is true.
maxlengthDetermines the maxLength applied to the q2-input.
See q2-input for more information.
persistentLabelpersistent-labelDisplays the provided label in the read state.
truncatedShortens long values with ellipses instead of splitting into multiple lines.
typeDetermines the type applied to the q2-input element.
See q2-input for all type values.
valueServes as the visible text while in the read state, and the default value of the input while in the edit state.
The q2-editable-field element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.
The event detail will not include a value or formattedValue if the event name is 'edit' or 'cancel'.
{ editing: boolean; name: "cancel" | "edit" | "save"; value?: string; formattedValue?: string; }Emitted when the user updates the q2-input element in the editing state.
{ formattedValue: string; value: string; }The q2-editable-field element exposes methods that can be used to perform various actions on the component.
Emulates clicking the cancel button, which will hide the <q2-input> field.
clickCancel() => Promise<void>Emulates clicking the edit button, which will display the <q2-input> field.
clickEdit() => Promise<void>Emulates clicking the save button, saving value in the <q2-input> field, and emitting a change event.
clickSave() => Promise<void>Emulates clicking the edit button, and setting the value of the <q2-input> field.
If the clickSave argument is true (default), the save button will be clicked after the value is set, and a
change event will be emitted.
setValue(value: string, options?: { clickSave?: boolean; }) => Promise<void>You can use q2-editable field with q2-section to provide an editable header, which can be convenient if you are needing to enable a user to change category or group names.
Some Section Content
<q2-section collapsible>
<h2 class="mrg(0)" slot="q2-section-header">
<q2-editable-field
label="Edit Section Header"
value="Editable Section Header"
class="block"
hide-label
truncated
>
</q2-editable-field>
</h2>
<p>
Some Section Content
</p>
</q2-section>
For inline validation as the user types, listen for the tctInput event and update the errors prop.
For validation that only runs on submit (for example, a server-side check), listen for tctChange with name: 'save' and set the errors prop to reject the value. While errors is non-empty, the component stays in edit mode; the rejected input is discarded so that a subsequent Cancel restores the last accepted value.
editableField.addEventListener('tctChange', event => {
if (event.detail.name !== 'save') return;
if (!isValid(event.detail.value)) {
editableField.errors = ['Not a valid value'];
return;
}
editableField.errors = undefined;
editableField.value = event.detail.value;
});
The following CSS variables are available to override the default theme styles of the q2-editable-field component.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!
This component uses other components in the Tecton library, including:
q2-inputq2-btnq2-iconThe changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.