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

Kbd

Kbd показывает сочетание клавиш рядом клавиш. Он называет клавиши-символы для скринридеров и показывает ⌘ на Mac и Ctrl на других системах.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-kbd keys="Mod+K"></tk-kbd>
<tk-kbd keys="Mod+Shift+P"></tk-kbd>
<tk-kbd keys="Esc"></tk-kbd>

Анатомия

Часть Что это
tk-kbd сам элемент; строчный, без фокуса и без роли
part key каждая клавиша, нативный <kbd>
part separator + между клавишами, только в bare

Клавиша-символ, например ⌘ или ↑, показывает символ, а скринридеру отдаёт слово, например «Command» или «Up arrow». Буква или слово, например K или F5, — обычный текст.

Варианты

<tk-kbd keys="Mod+K"></tk-kbd>
<tk-kbd keys="Mod+K" treatment="bare"></tk-kbd>
  • chip (по умолчанию): каждая клавиша на мягкой плашке. Там, где сочетание главное: подвалы палитр, подсказки, шпаргалки.
  • bare: тихий вспомогательный текст с + между клавишами. Там, где сочетание стоит после подписи, например в слоте trailing пункта Menu.

Клавиши

Перечислите клавиши в атрибуте keys через +. Регистр у именованных клавиш не важен.

Пишете На Mac На других системах
Mod ⌘ Ctrl
Ctrl, Control ⌃ Ctrl
Alt, Option, Opt ⌥ Alt
Shift ⇧ Shift
Cmd, Command ⌘ ⌘
Enter, Return ⏎ ⏎
Backspace / Delete, Del ⌫ / ⌦ ⌫ / ⌦
Up, Down, Left, Right ↑ ↓ ← → ↑ ↓ ← →
Esc, Tab, Space слово слово

Всё остальное, например K, 5 или F5, показывается как написано. Символы, введённые напрямую, например ⌘ или ↵, тоже называются для скринридеров.

Клавишу +, , или пробел в атрибут не записать. Задайте свойство keys массивом или напишите Space:

document.querySelector('tk-kbd').keys = ['Ctrl', '+'];

Платформа

<tk-kbd keys="Mod+S" platform="mac"></tk-kbd>
<tk-kbd keys="Mod+S" platform="windows"></tk-kbd>

platform по умолчанию auto: Kbd смотрит на операционную систему читателя. Значения mac, windows или linux задают её явно. windows и linux выглядят одинаково.

  • Для основного модификатора пишите Mod: на Mac это ⌘, на других системах Ctrl. Ctrl всегда означает клавишу Control, поэтому на Mac покажется ⌃, а не ⌘.
  • auto видит систему, а не клавиатуру. PC-клавиатура на Mac, переназначенные клавиши или удалённый рабочий стол могут его обмануть. Если ваш код выбирает модификатор по-другому, задайте platform так же.