Inline edit

Inline edit shows a value as plain text and turns it into a field when clicked. Use it for a value people mostly read and sometimes change, such as a title.

Stable

Figma

Overview

Usage

API

Accessibility

<tk-inline-edit label="title" value="Project Falcon" empty-label="Add a title">
  <tk-input slot="edit" aria-label="Title"></tk-input>
</tk-inline-edit>

Anatomy

Part	What it is
`tk-inline-edit`	the element; holds the value and the mode
read view	a button that looks like plain text; shows the value or the empty prompt
`edit` slot	one `tk-input` or `tk-textarea`, shown while editing
Save and Cancel	buttons under a `tk-textarea`; none under a `tk-input`

The value stays in place when the view switches.

Saving and cancelling

The field you slot decides how an edit is saved.

You slot	Save	Cancel	Click or tab away
`tk-input`	`Enter`, or leave the field	`Esc`	saves
`tk-textarea`	the Save button	the Cancel button or `Esc`	keeps the edit open

<tk-inline-edit label="description" empty-label="Add a description">
  <tk-textarea slot="edit" aria-label="Description" rows="4"></tk-textarea>
</tk-inline-edit>

Esc always cancels and restores the value.
confirm="buttons" adds Save and Cancel to a tk-input, for settings and account fields.
Don't use confirm="blur" with a tk-textarea: a click away would save a half-written text. It logs a console warning.

The edit field

<tk-inline-edit label="display name" value="Ada Lovelace" empty-label="Add your name">
  <tk-input slot="edit" aria-label="Display name" autocomplete="name"></tk-input>
</tk-inline-edit>

Put one tk-input or tk-textarea in slot="edit". Other elements get Save and Cancel buttons and log a warning.
Give the field its own aria-label, matching label. Don't wrap it in a Field; that adds a second visible label.
Don't give the field a name. The inline edit isn't a form field: to submit its value in a form, copy value into a hidden input.

States

<tk-inline-edit label="subtitle" empty-label="Add a subtitle">
  <tk-input slot="edit" aria-label="Subtitle"></tk-input>
</tk-inline-edit>

At rest the value looks like plain text. On hover it gets a light tint, and keyboard focus shows a ring.

Empty: with no value, the read view shows empty-label, the only sign the value can be edited. Phrase it as an action.
editing: the field is showing. Set it to open the field from code, or to close it after a save.
loading: a save is in progress; the edit stays open. The Save button shows a spinner; without buttons, the field becomes read-only.

Validation and saving to a server

inlineEdit.addEventListener('tk-commit', async (e) => {
  e.preventDefault();
  inlineEdit.loading = true;
  try {
    await save(e.detail.value);
    inlineEdit.value = e.detail.value;
    inlineEdit.editing = false;
  } catch {
    toaster.toast("Couldn't save the title. Try again");
  } finally {
    inlineEdit.loading = false;
  }
});

tk-commit is cancelable. If you don't cancel it, the value updates and the read view returns. Call preventDefault() to keep the field open while you check or save.
Show the problem yourself, such as in a Toast. The inline edit and its field have no error message of their own.
For a single-line value, offer an undo, such as a toast with an Undo action, because a click away saves.

When to use

Use inline edit for one value edited in place: a page title, a profile field, a description.
Use an Input or a Textarea for normal form fields.
Use a Dialog to rename a file, board, or team.
Don't use it for cells in a table.
For answers people review before submitting, link to a separate page to change them.
Use Text for a value people can't change.

Content

Set label to the noun being edited, such as "title". Screen readers hear "Edit title, Project Falcon".
Phrase empty-label as an action, in sentence case, with no end punctuation: "Add a description".
Keep Save and Cancel unless the context needs other words; change them with save-label and cancel-label.

Do / Don't

✅ Do	❌ Don't
Slot a `tk-input` for one line, a `tk-textarea` for longer text	Save a long text when people click away
Write the empty prompt as an action: "Add a description"	Leave an empty value with no prompt
Give the field its own `aria-label`	Wrap the field in a Field
Keep the field open with `preventDefault()` while you check	Close the field on a failed save
Offer an Undo toast for single-line edits	Assume a click away was intended
Edit one value in place	Use it for table cells or file renames

Input and Textarea: the fields you slot.
Toast: for errors and undo after a save.
Dialog: for renames and anything destructive.
Text: for values people can't change.

API

Attributes

Attribute	Type	Default	What it does
`value`	string	`''`	the saved value; fills the field when editing starts
`label`	string	`''`	what is edited, such as "title", required; names the read view
`empty-label`	string	`''`	the prompt shown when `value` is empty
`confirm`	`auto` \| `blur` \| `buttons`	`auto`	how an edit is saved; `auto` follows the slotted field
`editing`	boolean	`false`	whether the field is showing
`loading`	boolean	`false`	a save is in progress
`save-label`	string	`Save`	the Save button's label
`cancel-label`	string	`Cancel`	the Cancel button's label

Slots

Slot	Content
`edit`	one `tk-input` or `tk-textarea` with its own `aria-label`, required

Events

Event	Detail	When
`tk-commit`	`{ value }`	an edit is saved; cancelable, and canceling keeps the field open
`tk-cancel`		an edit is cancelled; the field reverts
`tk-edit`		editing starts

Methods

focus() focuses the field while editing, or the read view otherwise.

CSS

::part(read): the read-view button.
::part(value): the value or the empty prompt.
::part(edit): the edit view.
::part(controls), ::part(save), ::part(cancel): the button row and each button.

Tokens

Role	Token
empty prompt	`text/secondary`
hover tint	`state/hover`
focus ring	`border/accent/focus`
hover tint corners	`radius-8`
read-view padding, button gap	`space-4`, `space-8`

The value takes the surrounding text style and color. The field and buttons use their own tokens. Values per theme: Color.

Accessibility

Built in:

The read view is a real button named with the action and the value: "Edit title, Project Falcon".
Focus moves into the field when editing starts, and back to the read view after Enter, Esc, Save, or Cancel. When people tab or click away, focus stays where they went.
Esc only acts while editing, so it doesn't close a surrounding dialog otherwise.
The empty prompt meets text contrast in every theme.
The read view is at least 24px tall, and the focus ring is never hidden.

Your part:

Give the slotted field an aria-label that matches label.
Write empty-label as an action.
Show save errors yourself, and offer an undo for single-line edits.

Key	Action
`Tab`	moves focus to the read view
`Enter` / `Space`	on the read view, starts editing
`Enter`	in a `tk-input`, saves; in a `tk-textarea`, adds a new line
`Esc`	cancels and restores the value
`Tab` away	from a `tk-input`, saves; from a `tk-textarea`, keeps the edit open

Anatomy

Saving and cancelling

The edit field

States

Validation and saving to a server

When to use

Content

Do / Don't

Related

API

Attributes

Slots

Events

Methods

CSS

Tokens

Accessibility