Editable Field

Updated:

Use for inline editing of data that is normally displayed as read-only.

Development

Using with Q2 Section

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>

Handling Input Validation

It is recommended developers use the input event to validate user input for q2-editable-field.

If a developer uses the change event to validate user input, a couple considerations need to be made:

  1. using addEventListener(): The developer's change event listener will run first, then the component's internal change handler will run.
  2. using the onchange attribute: The component's internal change handler will not run, only the developer's onchange listener will control the change event effects.

Properties

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.

Learn more about properties.

block

If true, component expands to fill the width of its parent element.

disabled

Disables the edit button and field.

editing

Controls the edit state of the element.

errors

Determines the errors applied to the q2-input element.

See q2-input for more information.

formatModifier
format-modifier

Determines the formatModifier applied to the q2-input element.

Only applicable when type="currency".

See q2-input for more information.

hideLabel
hide-label

Hide's the field's <label> element from view.

hints

Determines the hints applied to the q2-input element.

See q2-input for more information.

label

The 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.

Localizable
maxlength

Determines the maxLength applied to the q2-input.

See q2-input for more information.

persistentLabel
persistent-label

Displays the provided label in the read state.

truncated

Shortens long values with ellipses instead of splitting into multiple lines.

type

Determines the type applied to the q2-input element.

See q2-input for all type values.

value

Serves as the visible text while in the read state, and the default value of the input while in the edit state.

Events

The q2-editable-field element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

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'.

Event Detail Type signature

{ editing: boolean; name: "cancel" | "edit" | "save"; value?: string; formattedValue?: string; }

input

Emitted when the user updates the q2-input element in the editing state.

Event Detail Type signature

{ formattedValue: string; value: string; }

tctChange

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'.

Event Detail Type signature

{ editing: boolean; name: "cancel" | "edit" | "save"; value?: string; formattedValue?: string; }

tctInput

Emitted when the user updates the q2-input element in the editing state.

Event Detail Type signature

{ formattedValue: string; value: string; }

Methods

The q2-editable-field element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

clickCancel

Test only

Emulates clicking the cancel button, which will hide the <q2-input> field.

Type signature

clickCancel() => Promise<void>

clickEdit

Test only

Emulates clicking the edit button, which will display the <q2-input> field.

Type signature

clickEdit() => Promise<void>

clickSave

Test only

Emulates clicking the save button, saving value in the <q2-input> field, and emitting a change event.

Type signature

clickSave() => Promise<void>

setValue

Test only

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.

Type signature

setValue(value: string, options?: { clickSave?: boolean; }) => Promise<void>

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-editable-field component.

Dependencies

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!