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

Select family

Четыре поля для выбора из списка. Меню, клавиатура и состояния у них общие; различаются они тем, как человек находит пункты и сколько может выбрать.

Стабильный
ОбзорИспользование

Select

<tk-select aria-label="Department" placeholder="Select a department">
  <option>Design</option>
  <option>Engineering</option>
  <option>Finance</option>
</tk-select>

Кнопка, которая открывает закрытый список. Нажатие буквы переводит к подходящему пункту.

Combobox

<tk-combobox aria-label="City" placeholder="Start typing a city">
  <option>Amsterdam</option>
  <option>Berlin</option>
  <option>Copenhagen</option>
  <option>Lisbon</option>
</tk-combobox>

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

Multiselect

<tk-multiselect aria-label="Colors" placeholder="Choose colors">
  <option selected>Red</option>
  <option>Green</option>
  <option selected>Blue</option>
</tk-multiselect>

Выбранные пункты видны как чипы. Меню не закрывается, пока человек выбирает. С searchable фильтрует как Combobox, а max ограничивает выбор.

Country select

<tk-country-select aria-label="Country" value="NL"></tk-country-select>

Combobox со встроенным списком всех стран, названиями на языке пользователя и флагами. Значение — двухбуквенный код.

Что у них общего

  • Имя: любое из них можно поместить в Field ради подписи, подсказки и ошибки или задать aria-label.
  • Размеры: medium (32px) и large (36px), как у Input и Button.
  • Состояния: disabled (нельзя перейти, не отправляется) и readonly (можно перейти, отправляется, но изменить нельзя).
  • Меню: одни и те же строки, галочки и заголовки групп из дочерних <option> и <optgroup>.
  • Панели фильтров: у Select и Multiselect есть variant="filter" — компактная кнопка с filter-label.
<tk-select variant="filter" filter-label="Status">
  <option>Open</option>
  <option>Closed</option>
</tk-select>
<tk-multiselect variant="filter" filter-label="Labels">
  <option>Bug</option>
  <option>Feature</option>
</tk-multiselect>