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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Use controls:

Hide code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Use dark colors for code blocksCopy
1
1

Remember to to use the provided loading attribute when a user interacts with a control that might not have an instant response:

Hide code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Use dark colors for code blocksCopy
1
1

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 Inline Editable in forms.

Accessibility

Keyboard navigation

KeyFunction
TabMove focus in and out of editable action
Tab and ShiftMove focus in and out of editable action
EnterEnable inline editing
SpaceEnable inline editing

API reference

calcite-inline-editable
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
afterConfirm

when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically.

optional
functionA function
() => Promise<void>
controlscontrols

specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false

booleanA boolean property should be present, or not
truefalse
disableddisabled

specify whether editing can be enabled

booleanA boolean property should be present, or not
truefalse
editingEnabledediting-enabled

specify whether the wrapped input element is editable, defaults to false

booleanA boolean property should be present, or not
truefalse
intlCancelEditingintl-cancel-editing

specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`

stringA custom string
"Cancel" (default)
intlConfirmChangesintl-confirm-changes

specify text to be user for the confirm changes button's aria-label, defaults to `Save`

stringA custom string
"Save" (default)
intlEnableEditingintl-enable-editing

specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`

stringA custom string
"Click to edit" (default)
loadingloading

specify whether the confirm button should display a loading state, defaults to false

booleanA boolean property should be present, or not
truefalse
scalescale

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

optional
typedChoose from a set of typed values
lms

Events

NameDescriptionDetail
calciteInlineEditableEditCancel

Emitted when the cancel button gets clicked.

bubblescomposedcancelable
void
calciteInlineEditableEditConfirm

Emitted when the check button gets clicked.

bubblescomposedcancelable
void

Methods

NameDescriptionSignatureReturns
setFocus

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding a `calcite-input`.

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