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 | truefalse | |
| disabled | disabled | specify whether editing can be enabled | truefalse | |
| editingEnabled | editing-enabled | specify whether the wrapped input element is editable, defaults to false | truefalse | |
| 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 | truefalse | |
| 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 | lms |
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`. |