НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Редактирование на месте

Редактирование на месте показывает значение обычным текстом и по нажатию превращает его в поле. Подходит для значений, которые в основном читают и иногда меняют, например заголовка.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<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>

Анатомия

Часть Что это
tk-inline-edit сам элемент; хранит значение и режим
режим чтения кнопка, которая выглядит как обычный текст; показывает значение или приглашение для пустого
слот edit один tk-input или tk-textarea, виден при редактировании
«Сохранить» и «Отмена» кнопки под tk-textarea; под tk-input их нет

При смене режима значение остаётся на месте.

Сохранение и отмена

Как сохраняется правка, решает поле в слоте.

В слоте Сохранить Отменить Нажать или уйти Tab-ом в сторону
tk-input Enter или уйти с поля Esc сохраняет
tk-textarea кнопка «Сохранить» кнопка «Отмена» или Esc правка остаётся открытой 
<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 всегда отменяет и возвращает значение.
  • confirm="buttons" добавляет «Сохранить» и «Отмена» к tk-input, для настроек и полей аккаунта.
  • Не ставьте confirm="blur" на tk-textarea: нажатие мимо сохранит недописанный текст. В консоли появится предупреждение.

Поле для правки

<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>
  • Положите в slot="edit" один tk-input или tk-textarea. Другие элементы получают кнопки «Сохранить» и «Отмена» и предупреждение в консоли.
  • Дайте полю свой aria-label, совпадающий с label. Не оборачивайте его в Field: появится вторая видимая подпись.
  • Не задавайте полю name. Редактирование на месте не поле формы: чтобы отправить значение с формой, копируйте value в скрытое поле.

Состояния

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

В покое значение выглядит как обычный текст. При наведении появляется лёгкая подложка, при фокусе с клавиатуры — рамка.

  • Пусто: без value в режиме чтения виден empty-label, единственный знак, что значение можно изменить. Пишите его как действие.
  • editing: поле открыто. Задайте его, чтобы открыть поле из кода или закрыть после сохранения.
  • loading: идёт сохранение, правка остаётся открытой. На кнопке «Сохранить» крутится индикатор, а без кнопок поле становится только для чтения.

Проверка и сохранение на сервер

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 можно отменить. Если его не отменить, значение обновится и вернётся режим чтения. Вызовите preventDefault(), чтобы поле оставалось открытым, пока вы проверяете или сохраняете.
  • Покажите проблему сами, например в Toast. У редактирования на месте и его поля нет своего сообщения об ошибке.
  • Для однострочного значения дайте отмену, например toast с действием Undo: нажатие мимо сохраняет.