Inline Editable

Inline Editable is an input-based component which when focused, the text can be saved or discarded.

Overview

Inline Editable was designed to keep input borders to a minimum when not engaged. The "Save" and "Discard" controls can be disabled using the controls property.

Inline Editable must contain an Input in its default slot.

Usage

  • As a more deliberate interaction to change text than a standard Input
  • Situations where text input is not a primary function
  • A title or header for a section of content
  • Content that can have a text change after being submitted

Sample

1
2
3
<calcite-inline-editable>
    <calcite-input value="Business District Tree Survey" placeholder="Business District Tree Survey"></calcite-input>
</calcite-inline-editable>
v3.0.3

Best practices

Below are important guidelines on using the Inline Editable component.

Correct Inline Editable headers
Do use in situations where inputs would be distracting.
Avoid Inline Editable headers
Avoid using in forms.

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
EnterWhen editingEnabled is false, enables inline editing.
SpaceWhen editingEnabled is false, enables inline editing.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
afterConfirmSpecifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically.() => Promise<void>
controlscontrolsWhen true and editingEnabled is true, displays save and cancel controls on the component.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
editingEnabledediting-enabledWhen true, inline editing is enabled on the component.booleanfalse
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
messageOverridesUse this property to override individual strings used by the component.{ enableEditing?: string; cancelEditing?: string; confirmChanges?: string; }
scalescaleSpecifies the size of the component. Defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale."l" | "m" | "s"

Slots

NameDescription
default (unnamed)A slot for adding a calcite-input.

Styles

NameDescription
--calcite-inline-editable-background-color-hoverSpecifies the component's background color when hovered.
--calcite-inline-editable-background-colorSpecifies the component's background color.
--calcite-inline-editable-button-background-colorSpecifies the button element's background color when appearance="solid" or appearance="outline-fill".
--calcite-inline-editable-button-corner-radiusSpecifies the button element's corner radius.
--calcite-inline-editable-button-loader-colorSpecifies the button element's loader color.
--calcite-inline-editable-button-shadow-colorSpecifies the button element's box-shadow color.
--calcite-inline-editable-button-text-colorSpecifies the button element's text color.

Events

NameDescriptionBehavior
calciteInlineEditableEditCancelEmits when the component's "cancel editing" button is pressed.bubblescomposed
calciteInlineEditableEditConfirmEmits when the component's "confirm edits" button is pressed.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close