Inline Editable
Calcite Inline Editable is a simple input-based component that 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 turned off with a prop.
Usage
- As a more deliberate interaction to change text than a standard Input
- Situations where text input is not a primary function
- Title or header for a section of content
- Something that can have a text change after being submitted
Sample
Use controls:
Remember to to use the provided loading attribute when a user interacts with a control that might not have an instant response:
Best practices
Below are important guidelines on using the Inline Editable component.

Accessibility
Keyboard navigation
Key | Function |
---|---|
Tab | Move focus in and out of editable action |
Tab and Shift | Move focus in and out of editable action |
Enter | Enable inline editing |
Space | Enable inline editing |
API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
afterConfirm | when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. | () => Promise<void> | ||
controls | controls | specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false | true false | |
disabled | disabled | specify whether editing can be enabled | true false | |
editingEnabled | editing-enabled | specify whether the wrapped input element is editable, defaults to false | true false | |
intlCancelEditing | intl-cancel-editing | specify text to be user for the cancel editing button's aria-label, defaults to `Cancel` | "Cancel" (default) | |
intlConfirmChanges | intl-confirm-changes | specify text to be user for the confirm changes button's aria-label, defaults to `Save` | "Save" (default) | |
intlEnableEditing | intl-enable-editing | specify text to be user for the enable editing button's aria-label, defaults to `Click to edit` | "Click to edit" (default) | |
loading | loading | specify whether the confirm button should display a loading state, defaults to false | true false | |
scale | scale | specify the scale of the inline-editable 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 |
Events
Name | Description | Detail |
---|---|---|
calciteInlineEditableEditCancel | Emitted when the cancel button gets clicked. | void |
calciteInlineEditableEditConfirm | Emitted when the check button gets clicked. | void |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | setFocus() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding a `calcite-input`. |